// variables
@import './common/sass/variables';

// fonts
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=PT+Sans&family=PT+Sans+Narrow:wght@400;700&display=swap');

// common
@import './common/sass/shared';

*, ::before, ::after {
    box-sizing: border-box;
}

// sheet core
.charsheet {
  // width: 720px !important;
  min-width: 480;
  margin: 0 auto !important;
  padding: 15px;
  font-weight: normal;

  @include std-font();

  p {
    @include std-font($text-font);
  }

  h2 {
    @include std-font($mono-font);
    color: $dark-red;
    text-align: center;
  }

  label {
    @include std-font($narrow-font);
  }

  .page-container {
    display: flex;
  }

  .hide-element {
    display: none;
  }

  input[type=checkbox].hide-element {
    display: none;
  }

  input[type=radio].hide-element {
    display: none;
  }

  div.hide-element {
    display: none;
  }

  // Chrome, Safari, Edge, Opera
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  // Firefox
  input[type=number] {
    -moz-appearance: textfield;
  }

 input, textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: $light-gray;
    border: none;
    border-radius: 0;
    @include std-font($input-font);
    font-size: 1em;
    text-decoration: none;
  }

  input[type=number] {
    text-align: center;
    font-size: 1.2em;
  }

  input[type=text], input[type=date] {
    @include fill-available();
  }

  input[type=checkbox] {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: $light-gray;
    border: none;
    border-bottom: 1px dotted $black;
    border-radius: 0;
    @include std-font($input-font);
    font-size: 0.8em;
    text-decoration: none;
    width: auto;
  }

  textarea {
    resize: none;
    line-height: 2em;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;         // Opera/IE 8+
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
  }

  label {
    margin: 0;
  }

  span.showhide:checked {
    background-color: $dark-gray;
    color: white;
    transition: .5s ease;
  }

  span.showhide {
    display: inline;
    border: 1px solid #ccc;
    margin-right: 11px;
    border-radius: 4px;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 1em;
  }

  span.showhide:hover {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    background-color: #ccc;
    color: $dark-gray;
    transition: .5s ease;
  }

  div.showhide { @include hide(); }

  .hide-element { display: none; }

  input[type=checkbox].hide-element { display: none; }

  input[type=radio].hide-element { display: none; }

  div.hide-element { display: none; }

  button.btn.repcontrol_edit,
  button.btn.repcontrol_add {
      width: auto;
      height: auto;
      border: 1px solid $black;
      border-radius: 0;
      // font-weight: bold;
      font-size: 0em;
      text-shadow: none;
      text-transform: uppercase;
      padding: 0.2em;
      margin: 0.3em;
      @include std-font();
      color: $black;
      background: $light-gray;

      &:hover {
        color: $white;
        background: $dark-red;
      }

      &:focus { @include input-highlight(1px); }
  }

  .repcontrol button.repcontrol_add:before {
    font-family: pictos;
    font-size: 13px;
    margin: 1em;
    content: '&';
  }

  .repcontrol button.repcontrol_edit:before {
    font-family: pictos;
    font-size: 13px;
    margin: 1em;
    content: '(';
  }

  .repcontainer.editmode + .repcontrol button.repcontrol_edit:before {
    content: ')';
  }

  button.btn.repcontrol_edit {
    margin-right: 3px;
  }
  button.btn.repcontrol_add {
    margin-left: 3px;
  }

  // Pages
  @import './pages/index';

  // Components
  @import './components/component';
  @import './components/header/header';
  @import './components/input/input';
  @import './components/nav/nav';
  @import './components/acts/acts';
  @import './components/encounter_report/encounter_report';

}

.ui-dialog {
  .charsheet {

    .button-container {
      display: flex;

      span {
        font-size: 13px;
        text-transform: uppercase;
        @include std-font($mono-font);
        padding-left: 5px;
      }
    }

    button[type=roll] {
      align-items: left;
      color: $dark-red;
      font-weight: normal;
      text-decoration: none;
      background: none;
      background-image: none;
      border: none;
      box-shadow: none;
      text-shadow: none;
      padding: 0;
      margin: 0;
      text-align: center;
      
      &:hover { transition: .5s ease; }

      &::before {
        font-family: 'dicefontd6';
        content: 'L';
      }
    }

    .repcontainer {
      .repitem {
        margin: 5px;
        text-shadow: none;

        .btn {
          font-size: 0.8em;
          border-radius: 0;
          border: 1px solid $dark-red;
          color: $dark-red;
          background: $white;
          text-shadow: 0;
        }

        .itemcontrol {
          text-shadow: none;

          .btn-danger {
            background-color: $red;
            color: $white;
            border: 1px solid transparent;
          }

          .repcontrol_del, .repcontrol_move {
            text-shadow: none;
          }

          .repcontrol_del {
            float: right;
            width: auto;
            margin: 0;
            height: auto;
          }
          .repcontrol_move {
            cursor: move;
            width: auto;
            margin: 0;
            height: auto;
          }
        }
      }
    }
  }
}

input[type=text].repeating-input {
  border-bottom: 2px dotted $dark-red !important;
  margin: 0;
}

@import './roll-templates/roll-template'