.true-modal-overlay {
  background-color: rgba(0,0,0,0.4);
  transition: opacity 0.3s ease;
}

// -- INPUTS --------------------------------------------------------------
.true-input {
  input, select {
    width: 100%;
    padding: $ax-input-padding-v $ax-input-padding-h;
    border: 1px solid $ax-control-border-color;
  }
}

.true-input_popup-visible {
  input {
    border-color: $axAccent;
  }
  .true-input__btn {
    background: none;
    color: $ax-input-btn-color_hover;
  }
}

input.true-disable-te:not(:disabled) {
  cursor: pointer;
}

.true-input_with-btn input {
  width: 100%;
  padding: $ax-input-padding-v $ax-input-wbtn-padding-right $ax-input-padding-v $ax-input-padding-h;
  margin-right: 0;
}

.true-input_with-error {
  input {
    border-color: $ax-error-color;
    background-color: $ax-error-back-color;
  }
}

.true-input__err-msg {
  color: $ax-error-color;
  padding-top: 0.3em;
  font-size: 0.75em;
}

.true-input__btn {
  color: $ax-input-btn-color;
  line-height: 1em;
  vertical-align: baseline;
  border: none;
  background: none;
  transition: color 0.15s ease;

  min-width: $ax-input-btn-width;
  max-width: $ax-input-btn-width;

  margin-left: -$ax-input-btn-width;
  padding: $ax-input-padding-v 0;

  &:focus {
    outline: none;
  }

  &:not(:disabled):hover {
    border: none;
    background: none;
    cursor: pointer;
    color: $ax-input-btn-color_hover;
  }
}

// -- LINK -----------------------------------------------------------------
a.true-link_disabled {
  cursor: default;
  color: $ax-text-disabled-color !important;
  border-bottom: 1px dotted $ax-text-disabled-color !important;
}

// -- MENU ----------------------------------------------------------------
.true-menu {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 5px 0;

  .true-menu-item {
    button {
      cursor: pointer;
      padding: 0.6em 0.4em;
      border: none;
      font-weight: normal;
      white-space: nowrap;

      div:first-child {
        margin-right: 2em;
      }

      &:not(:disabled):hover {
        border: none;
        background: $ax-btn-back-color_hover;
      }

      &:focus {
        outline: none;
      }

      span {
        display: inline-block;
        width: 1.6em;
        min-width: 1.6em;
        margin: 0 0.6em;
        flex-grow: 0;
        color: #666;
      }

      &:disabled {
        cursor: default;
        color: $ax-text-disabled-color;

        span {
          color: $ax-text-disabled-color;
        }

        .true-submenu {
          color: $ax-text-disabled-color;
        }
      }
    }
  }

  .true-submenu-visible button {
      background-color: $ax-btn-back-color_hover !important;
  }

  .true-menu-item:not(:first-child).true-menu-item_divide:before {
    content: "";
    border-top: 1px dashed $ax-control-border-color;
    display: block;
    margin: 5px 0;
    height: 0.0;
  }
}

// -- CALENDAR ------------------------------------------------------------
.true-calendar {

  padding: 0.2em;

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  display: inline-block;

  // Div with control buttons
  .true-calendar__controls {
    padding: 1.2em 0.4em;

    .true-button {
      padding: 0.5em 0.6em;
    }

    // Button with month and year
    div:first-child > .true-button {
      min-width: 9em;
    }
  }

  table.true-days col, table.true-day-names col {
    width: 2.5em;
  }

  table.true-months col {
    width: 6.0em;
  }

  table.true-years col {
    width: 4.48em;
  }

  table.true-day-names {

    border: 0;
    margin: 0;

    // Week days
    thead td {
      color: $ax-text-disabled-color;
      border: 0px solid transparent;
      text-align: center;
      font-size: 0.75em;
      padding: 0.3em 0;
    }

    tbody tr:first-child td {
      padding: 0.3em 0;
      border-top: 1px solid $ax-control-border-color;
    }
  }

  table.true-days:focus td.true-selected {
    background-color: $ax-btn-back-color_hover;
  }

  table.true-days, table.true-months, table.true-years {
    border: 0;
    margin: 0;

    tbody {
      tr {
        td {
          border: 1px solid transparent;
          text-align: center;
          padding: 0.6em 0;

        }

        td:hover:not(.true-transparent) {
          cursor: pointer;
          background-color: $ax-btn-back-color_hover;
        }

        // Не выбранный месяц
        td:not(.true-current) {
          color: $ax-text-disabled-color;
        }

        td.true-today {
          border-color: #ddd;
        }

        td.true-current.true-selected {
          border-color: $axAccent;
        }
      }
    }
  }
}

// -- TURNABLE ICON -------------------------------------------------------
.true-turnable {
  line-height: 1.1em;
  display: inline-block;
  transition: transform 0.25s ease;
}

.true-turned {
  transform: rotate(179deg);
}

// -- Disabled text -------------------------------------------------------
.true-dis-color {
  color: $ax-text-disabled-color;
}

// -- CHECKBOX ------------------------------------------------------------
.true-checkbox {
  text-align: left;
  display: block;
  position: relative;
  padding-left: 2.0em;
  cursor: pointer;
  user-select: none;

  // Hide default checkbox
  input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
  }

  input:focus ~ .true-checkbox__checkmark {
    border-color: $axAccent;
  }

  // Show the checkmark when checked
  input:checked ~ .true-checkbox__checkmark:after {
    display: block;
  }

  // Custom checkbox
  .true-checkbox__checkmark {
    position: absolute;
    left: 0;
    top: 0;
    height: 1.3em;
    width: 1.3em;
    min-width: 1.3em;
    border: 1px solid $ax-control-border-color;
    transition: border-color 0.25s ease, background-color 0.25s ease;
  }

  // Checkmark/indicator (hidden when not checked)
  .true-checkbox__checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  // Style the checkmark/indicator
  .true-checkbox__checkmark:after {
    left: 0.45em;
    top: 0.1em;
    width: 0.3em;
    height: 0.7em;
    border: solid #444;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
}

// Inversed view
.inversed > .true-checkbox input:checked ~ .true-checkbox__checkmark {
  background-color: $axAccent;
  border-color: $axAccent;
}

.inversed > .true-checkbox .true-checkbox__checkmark:after {
  border: solid $ax-fore-color_inversed;
  border-width: 0 2px 2px 0;
}

// -- BUTTONS -------------------------------------------------------------
.true-button {
 background: none;
 border: 1px solid rgba(255, 255, 255, 0.0);
 font-weight: normal;
 cursor: pointer;
 border-radius: $ax-btn-radius;
 padding: $ax-input-padding-v $ax-input-padding-v;
 white-space: nowrap;

 span {
   color: $ax-btn-color;
   transition: color 0.2s ease;
 }

 &:disabled {
   cursor: default;
   color: $ax-text-disabled-color;
 }

 &:not(:disabled):hover
 {
   background-color: $ax-btn-back-color_hover;
   border: 1px solid $ax-btn-back-color_hover;
   span {
     color: $ax-btn-color_hover;
   }
 }

 &:focus {
   outline: 0;
 }

 &:active {
   color: $axAccent;
   background-color: $ax-btn-back-color_hover;
   span {
     color: $axAccent !important;
   }
 }

 &.stroked {
   background: #fbfcfd;
   border: 1px solid $ax-control-border-color;

   &:hover {
     background: $ax-btn-back-color_hover;
     border: 1px solid $ax-control-border-color;
   }

   &:focus {
     border: 1px solid $ax-control-border-color;
     background: $ax-btn-back-color_hover;
   }

   &:active {
     color: unset;
     border: 1px solid $axAccent;
   }
 }

 &.flat {
   border: none;
   background: none;

   span {
     transition: opacity 0.25s ease;
     opacity: 0.5;
   }

   &:not(:disabled):hover {
     background: none;
     border: none;
     span {
       opacity: 1.0;
     }
   }

   &:not(:disabled):focus {
     background: none;
     span {
       color: $ax-btn-color_hover;
     }
   }

   &:not(:disabled):focus span {
     opacity: 1.0;
   }

   &:not(:disabled):active span {
     color: $axAccent;
   }
 }

 &.primary {
   font-weight: bold;
   background-color: $ax-btn-color_primary;
   border: 1px solid $ax-btn-color_primary;
   color: $ax-fore-color_inversed;
   span {
     color: $ax-fore-color_inversed;
   }

   &:focus {
     background-color: $ax-btn-color-primary_focus;
     border: 1px solid $ax-btn-color-primary_focus;
   }

   &:disabled {
     background-color: $ax-text-disabled-color;
     border: 1px solid $ax-text-disabled-color;
   }

   &:not(:disabled):hover {
     background-color: $ax-btn-color-primary_hover;
     border: 1px solid $ax-btn-color-primary_hover;
     span {
       color: $ax-fore-color_inversed;
     }
   }

   &:not(:disabled):active span {
     color: $ax-btn-color-primary_focus;
   }
 }

 &.danger {
   font-weight: bold;
   background-color: $ax-btn-color_danger;
   border: 1px solid $ax-btn-color_danger;
   color: $ax-fore-color_inversed;
   span {
     color: $ax-fore-color_inversed;
   }

   &:focus {
     background-color: $ax-btn-color-danger_focus;
     border: 1px solid $ax-btn-color-danger_focus;
   }

   &:disabled {
     background-color: $ax-text-disabled-color;
     border: 1px solid $ax-text-disabled-color;
   }

   &:not(:disabled):hover {
     background-color: $ax-btn-color-danger_hover;
     border: 1px solid $ax-btn-color-danger_hover;
     span {
       color: $ax-fore-color_inversed;
     }
   }

   &:not(:disabled):active span {
     color: $ax-btn-color-danger_focus;
   }
 }

 &.primary.outline {
   font-weight: bold;
   background: none;
   border: 1px solid $ax-btn-color_primary;
   color:  $ax-btn-color_primary;
   span {
     color: $ax-btn-color_primary;
   }

   &:disabled {
     border: 1px solid $ax-text-disabled-color;
     color: $ax-text-disabled-color;
   }

   &:focus {
     border: 1px solid $ax-btn-color-primary_focus;
     background: $ax-btn-back-color_hover;
   }

   &:not(:disabled):hover {
     background: none;
     background: $ax-btn-back-color_hover;
     border: 1px solid $ax-btn-color-primary_hover;
     color: $ax-btn-color_primary;
     span {
       color: $ax-btn-color_primary;
     }
   }

   &:not(:disabled):active {
     color: $ax-btn-color-primary_hover;
     span {
       color: $ax-btn-color-primary_hover !important;
     }
   }

   &.checked {
     border-color: $axAccent;
     color: $axAccent;
     span {
       color: $axAccent;
     }

     &:not(:disabled):hover, &:not(:disabled):active,  {
       border-color: $axAccent_hover;
       color: $axAccent_hover;
       span {
         color: $axAccent_hover !important;
       }
     }
   }
 }

 &.danger.outline {
   font-weight: bold;
   background: none;
   border: 1px solid $ax-btn-color_danger;
   color:  $ax-btn-color_danger;
   span {
     color: $ax-btn-color_danger;
   }

   &:disabled {
     border: 1px solid $ax-text-disabled-color;
     color: $ax-text-disabled-color;
   }

   &:focus {
     border: 1px solid $ax-btn-color-danger_focus;
     background: $ax-btn-back-color_hover;
   }

   &:not(:disabled):hover {
     background: none;
     background: $ax-btn-back-color_hover;
     border: 1px solid $ax-btn-color-danger_hover;
     color: $ax-btn-color_danger;
     span {
       color: $ax-btn-color_danger;
     }
   }

   &:not(:disabled):active {
     color: $ax-btn-color-danger_hover;
     span {
       color: $ax-btn-color-danger_hover !important;
     }
   }
 }

}

// LINK
.true-link:focus {
   outline: none;
}

// -- DIALOGS ------------------------------------------------------------------
.true-header {
 border-bottom: 1px solid $ax-control-border-color;
}

.true-footer {
  border-top: 1px solid #dedede;
  background-color: #f8f9fa;
}

.true-dialog-alert {
  // Цвет должен быть таким же, как цвет заголовка
  background-color: #fff;
  border-bottom: 1px solid #aaa;
  box-shadow: 0px 6px 6px rgba(0,0,0,.15);
}