<commit_before>@import "~@skyux/theme/scss/mixins";
@import "~@skyux/theme/scss/_compat/mixins";
@import "~@skyux/theme/scss/variables";

$input-box-transitions: border-color 150ms, box-shadow 150ms, color 150ms;

sky-input-box {
  display: block;

  .sky-input-box-input-container {
    width: 100%;
  }

  .sky-form-group {
    display: flex;
    flex-wrap: wrap;
  }

  .sky-input-box-input-group-inner {
    display: flex;
    background-color: #fff;
    width: 100%;
    z-index: 1;

    &:not(.sky-field-status-active):not(.sky-field-status-invalid) {
      @include sky-border(dark, top, bottom, left, right);
    }
  }

  .sky-input-box-btn-inset {
    .sky-btn {
      background-color: transparent;
      border: none;
    }
  }

  .sky-control-label {
    flex-grow: 1;
  }

  sky-character-counter-indicator {
    flex-grow: 1;
    text-align: right;
    margin-bottom: $sky-margin-half;
  }

  .sky-control-label + sky-character-counter-indicator {
    flex-grow: 0;
    flex-shrink: 0.001;
  }

  .sky-form-control,
  .sky-form-control:focus {
    border: none;
    flex-basis: 100%;

    &:focus,
    &.ng-invalid.ng-touched {
      border: none;
      box-shadow: none;
    }
  }
}

.sky-theme-modern {
  /* Styles applied to both enabled and disabled input boxes */
  .sky-input-box {
    .sky-input-box-group {
      display: flex;
    }

    .sky-input-box-group-form-control {
      flex-grow: 1;
      /*
        The combination of position: relative here and z-index on the focused form
        control allows the drop shadow on the focused input group to display above the
        input group buttons.
      */
      position: relative;

      &:first-child {
        .sky-form-group {
          border-top-left-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-left-radius: $sky-theme-modern-box-border-radius-default;
        }
      }

      &:last-child {
        .sky-form-group {
          border-top-right-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-right-radius: $sky-theme-modern-box-border-radius-default;
        }
      }
    }

    .sky-input-box-form-group-inner {
      display: flex;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    .sky-input-group-btn {
      .sky-btn {
        border-radius: 0;
        color: $sky-theme-modern-font-deemphasized-color;
        margin: 0;
        padding: 0;
        position: relative;
        transition: $input-box-transitions;
        width: 55px;

        .sky-icon {
          font-size: 24px;
        }
      }

      &:first-child {
        .sky-btn {
          border-top-left-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-left-radius: $sky-theme-modern-box-border-radius-default;
          margin-right: -1px;

          &:focus {
            z-index: 1;
          }
        }
      }

      &:last-child {
        .sky-btn {
          border-top-right-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-right-radius: $sky-theme-modern-box-border-radius-default;
        }
      }
    }

    .sky-input-box-group-form-control-focus:not(:last-child),
    .sky-input-box-group-form-control-invalid:not(:last-child),
    .sky-input-group-btn:focus-within:not(:last-child) {
      z-index: 1;
    }

    .sky-input-box-group-form-control + .sky-input-group-btn {
      .sky-btn {
        margin-left: -2px;
      }
    }

    .sky-input-group-btn + .sky-input-group-btn {
      .sky-btn {
        margin-left: -1px;
      }
    }

    .sky-input-box-group-form-control-invalid {
      .sky-form-group {
        @include sky-theme-modern-border-invalid;
        color: $sky-background-color-danger-dark;
      }
    }

    .sky-input-box-group-form-control-focus:not(:active),
    .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid {
      /*
        The combination of z-index here and position: relative on the form control
        allows the drop shadow on the focused input group to display above the
        input group buttons.
      */
      z-index: 1;

      .sky-form-group {
        @include sky-theme-modern-border-focus;
        color: $sky-theme-modern-text-color-action-primary;
      }
    }

    .sky-form-group {
      background-color: $sky-color-white;
      @include sky-theme-modern-border;
      color: $sky-theme-modern-font-data-label-color;
      flex-wrap: nowrap;
      margin-bottom: 0;
      padding: 0;

      .sky-control-label,
      sky-character-counter-indicator {
        margin-bottom: 0;
        padding: 6px 15px 1px 15px;
        position: relative;
        /*
          The label should be above input elements so clicking on it will focus on the
          input element. It is important the user be able to click on the label rather
          than the input element's top padding, because clicking the label will place
          the cursor where the user last left it, while clicking the input's padding
          always places the cursor at the beginning of the text.
        */
        z-index: 2;
      }

      .sky-control-label,
      .sky-character-count-label {
        font-size: 13px;
      }

      .sky-form-control {
        background-color: transparent;
        border: none;
        border-radius: $sky-theme-modern-box-border-radius-default;
        font-size: $sky-theme-modern-font-body-default-size;
        /*
          Allow the height of the control to be determined by the line height instead of the
          browser's pre-defined height for the element. This is particularly important for the
          select element since its height is normally larger than desired for controls in
          an input box.
        */
        height: auto;
        line-height: 1.15;
        margin-top: -23px;
        padding: 26px 15px 11px 15px;
        position: relative;

        &:focus,
        &.ng-invalid {
          box-shadow: none;<commit_msg>Adjust form control line height to fit descenders (#261)<commit_after>@import "~@skyux/theme/scss/mixins";
@import "~@skyux/theme/scss/_compat/mixins";
@import "~@skyux/theme/scss/variables";
@import "~@skyux/theme/scss/_compat/variables";

$input-box-transitions: border-color 150ms, box-shadow 150ms, color 150ms;

sky-input-box {
  display: block;

  .sky-input-box-input-container {
    width: 100%;
  }

  .sky-form-group {
    display: flex;
    flex-wrap: wrap;
  }

  .sky-input-box-input-group-inner {
    display: flex;
    background-color: #fff;
    width: 100%;
    z-index: 1;

    &:not(.sky-field-status-active):not(.sky-field-status-invalid) {
      @include sky-border(dark, top, bottom, left, right);
    }
  }

  .sky-input-box-btn-inset {
    .sky-btn {
      background-color: transparent;
      border: none;
    }
  }

  .sky-control-label {
    flex-grow: 1;
  }

  sky-character-counter-indicator {
    flex-grow: 1;
    text-align: right;
    margin-bottom: $sky-margin-half;
  }

  .sky-control-label + sky-character-counter-indicator {
    flex-grow: 0;
    flex-shrink: 0.001;
  }

  .sky-form-control,
  .sky-form-control:focus {
    border: none;
    flex-basis: 100%;

    &:focus,
    &.ng-invalid.ng-touched {
      border: none;
      box-shadow: none;
    }
  }
}

.sky-theme-modern {
  /* Styles applied to both enabled and disabled input boxes */
  .sky-input-box {
    .sky-input-box-group {
      display: flex;
    }

    .sky-input-box-group-form-control {
      flex-grow: 1;
      /*
        The combination of position: relative here and z-index on the focused form
        control allows the drop shadow on the focused input group to display above the
        input group buttons.
      */
      position: relative;

      &:first-child {
        .sky-form-group {
          border-top-left-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-left-radius: $sky-theme-modern-box-border-radius-default;
        }
      }

      &:last-child {
        .sky-form-group {
          border-top-right-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-right-radius: $sky-theme-modern-box-border-radius-default;
        }
      }
    }

    .sky-input-box-form-group-inner {
      display: flex;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    .sky-input-group-btn {
      .sky-btn {
        border-radius: 0;
        color: $sky-theme-modern-font-deemphasized-color;
        margin: 0;
        padding: 0;
        position: relative;
        transition: $input-box-transitions;
        width: 55px;

        .sky-icon {
          font-size: 24px;
        }
      }

      &:first-child {
        .sky-btn {
          border-top-left-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-left-radius: $sky-theme-modern-box-border-radius-default;
          margin-right: -1px;

          &:focus {
            z-index: 1;
          }
        }
      }

      &:last-child {
        .sky-btn {
          border-top-right-radius: $sky-theme-modern-box-border-radius-default;
          border-bottom-right-radius: $sky-theme-modern-box-border-radius-default;
        }
      }
    }

    .sky-input-box-group-form-control-focus:not(:last-child),
    .sky-input-box-group-form-control-invalid:not(:last-child),
    .sky-input-group-btn:focus-within:not(:last-child) {
      z-index: 1;
    }

    .sky-input-box-group-form-control + .sky-input-group-btn {
      .sky-btn {
        margin-left: -2px;
      }
    }

    .sky-input-group-btn + .sky-input-group-btn {
      .sky-btn {
        margin-left: -1px;
      }
    }

    .sky-input-box-group-form-control-invalid {
      .sky-form-group {
        @include sky-theme-modern-border-invalid;
        color: $sky-background-color-danger-dark;
      }
    }

    .sky-input-box-group-form-control-focus:not(:active),
    .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid {
      /*
        The combination of z-index here and position: relative on the form control
        allows the drop shadow on the focused input group to display above the
        input group buttons.
      */
      z-index: 1;

      .sky-form-group {
        @include sky-theme-modern-border-focus;
        color: $sky-theme-modern-text-color-action-primary;
      }
    }

    .sky-form-group {
      background-color: $sky-color-white;
      @include sky-theme-modern-border;
      color: $sky-theme-modern-font-data-label-color;
      flex-wrap: nowrap;
      margin-bottom: 0;
      padding: 0;

      .sky-control-label,
      sky-character-counter-indicator {
        margin-bottom: 0;
        padding: 6px 15px 1px 15px;
        position: relative;
        /*
          The label should be above input elements so clicking on it will focus on the
          input element. It is important the user be able to click on the label rather
          than the input element's top padding, because clicking the label will place
          the cursor where the user last left it, while clicking the input's padding
          always places the cursor at the beginning of the text.
        */
        z-index: 2;
      }

      .sky-control-label,
      .sky-character-count-label {
        font-size: 13px;
      }

      .sky-form-control {
        background-color: transparent;
        border: none;
        border-radius: $sky-theme-modern-box-border-radius-default;
        font-size: $sky-theme-modern-font-body-default-size;
        /*
          Allow the height of the control to be determined by the line height instead of the
          browser's pre-defined height for the element. This is particularly important for the
          select element since its height is normally larger than desired for controls in
          an input box.
        */
        height: auto;
        line-height: 18px;
        margin-top: -23px;
        padding: 26px 15px 10px 15px;
        position: relative;

        &:first-line {
          line-height: 19px;
        }

        &:focus,
        &.ng-invalid {
          box-shadow: none;
{'fraction_non_alphanumeric': 0.1256631299734748, 'fraction_numerical': 0.011273209549071617, 'mean_word_length': 1.9128440366972477, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6650656', 'n_tokens_mistral': 4057, 'n_tokens_neox': 3807, 'n_words': 812}