// Depenencies:
// - 12 Column Grid
// - Summary Form
// Overrides some things in:
// - Input Fields
// - Datepicker
// - Timepicker
// - File Upload
// - File Upload (Advanced)
// - Lookup

.form-compact-container {
  .row {
    max-width: 100%;
  }

  .banner {
    display: flex;

    .thumbnail {
      flex-grow: 0;
      flex-shrink: 0;
      padding: 15px;
    }

    .summary-form {
      flex-grow: 1;
      flex-shrink: 1;
      padding: 10px;
    }
  }
}

.form-compact {
  margin: 0 auto;

  .row {
    min-height: 50px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .column,
  .columns {
    float: none;
    padding: 0;

    &.form-section-header {
      background-color: $formcompact-bg-color;
      padding: 16px 8px 15px;
    }

    fieldset {
      height: 100%;
    }

    label,
    .checkbox-group legend,
    .radio-group legend {
      @include transition(background-color 100ms $cubic-ease, color 100ms $cubic-ease);

      margin-bottom: 0;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:not(.radio-label):not(.checkbox-label) {
        overflow: hidden;
        padding: 8px 9px 0;
      }

      &.required:not(.inline) {
        &::after {
          color: $formcompact-field-required-color;
          content: '●';
          top: 0;
        }
      }
    }

    label {
      background-color: $formcompact-field-bg-color;

      &.radio-label,
      &.checkbox-label {
        background-color: transparent;
      }
    }

    input {
      @include transition(background-color 100ms $cubic-ease, border-color 100ms $cubic-ease, color 100ms $cubic-ease);

      background-color: $formcompact-field-bg-color;
      border-bottom: 1px solid $formcompact-field-border-color;
      border-left: 0;
      border-radius: 0;
      border-right: 1px solid $formcompact-field-border-color;
      border-top: 0;
      padding: 8px;
      text-overflow: ellipsis;
      width: 100%;

      &:focus {
        box-shadow: none;
      }

      // Disable background for radios/checks (handled by `fieldset`)
      &.radio,
      &.checkbox {
        background-color: transparent;
      }
    }

    &.is-focused {
      // NOTE: long-form border properties are used on purpose, don't change to shorthand.
      input {
        background-color: $formcompact-field-bg-focus-color;
        border-bottom-color: $formcompact-field-border-focus-color;
        border-left-color: $formcompact-field-border-focus-color;
        border-right-color: $formcompact-field-border-focus-color;
        border-top-color: transparent;

        &.radio {
          background-color: transparent;
        }
      }

      label {
        background-color: $formcompact-field-bg-focus-color;

        &.radio-label {
          background-color: transparent;
        }
      }

      .radio-group,
      .checkbox-group {
        background-color: $formcompact-field-bg-focus-color;
        border-bottom-color: $formcompact-field-border-focus-color;

        &::after {
          border-left-color: $formcompact-field-border-focus-color;
          border-right-color: $formcompact-field-border-focus-color;
        }

        label {
          background-color: transparent;
        }
      }
    }

    &.is-readonly {
      input {
        background-color: $input-color-readonly-background;
        border-bottom-color: $input-color-readonly-border;
        border-left-color: $input-color-readonly-border;
        border-right-color: $input-color-readonly-border;
        color: $input-color-readonly-font;
      }

      label {
        background-color: $input-color-readonly-background;
        color: $input-color-readonly-font;
      }

      .radio-group,
      .checkbox-group {
        background-color: $input-color-readonly-background;
        border-bottom-color: $input-color-readonly-border;

        &::after {
          border-left-color: $input-color-readonly-border;
          border-right-color: $input-color-readonly-border;
        }

        label {
          background-color: transparent;
        }
      }
    }

    &.is-disabled {
      input {
        border-bottom-color: $input-color-disabled-border;
        border-left-color: $input-color-disabled-border;
        border-right-color: $input-color-disabled-border;
        color: $input-color-disabled-font;
      }

      .radio-group,
      .checkbox-group {
        border-bottom-color: $input-color-disabled-border;

        &::after {
          border-left-color: $input-color-disabled-border;
          border-right-color: $input-color-disabled-border;
        }
      }
    }
  }

  // =============================================
  // Form-Compact Date/Time Picker Styles
  // =============================================
  .datepicker,
  .timepicker {
    + .icon {
      margin-top: auto;
    }
  }

  .datepicker {
    + .icon {
      margin-left: -28px;
    }
  }

  .timepicker {
    + .icon {
      margin-left: -31px;
    }
  }

  // =============================================
  // Form-Compact Lookup Styles
  // =============================================
  .lookup-wrapper {
    cursor: pointer;
    display: block;
    margin-bottom: auto;
  }

  .lookup {
    + .trigger {
      .icon {
        top: 0;
      }
    }
  }

  // =============================================
  // Form-Compact Checkbox Styles
  // =============================================
  .field.field-checkbox {
    margin-bottom: 5px;

    &:first-of-type {
      margin-top: 26px;
    }
  }

  .checkbox-label {
    padding-left: 33px;
  }

  input.checkbox:checked,
  input.checkbox:checked + input[type='hidden'],
  span.checkbox > input:checked {
    + label::after {
      left: 10px;
    }
  }

  label.inline .checkbox:checked ~ .label-text::after {
    left: 10px;
  }

  // =============================================
  // Form-Compact Fieldset Styles
  // =============================================

  // Zeroes out a rule from `_fieldset.scss`
  .row {
    .column,
    .columns {
      fieldset {
        margin-top: auto;
      }
    }
  }

  // =============================================
  // Form-Compact Radio Group Styles
  // =============================================
  .checkbox-group,
  .radio-group {
    @include transition(background-color 100ms $cubic-ease, border-color 100ms $cubic-ease, color 100ms $cubic-ease);

    background-color: $formcompact-field-bg-color;
    border-bottom: 1px solid $formcompact-field-border-color;
    margin-bottom: 0;
    position: relative;

    // Fake the right border, since we don't want it to
    // stretch the full height of the fieldset.
    &::after {
      border-left-color: $formcompact-field-border-color;
      border-right-color: $formcompact-field-border-color;
      border-right-style: solid;
      border-right-width: 1px;
      bottom: 0;
      content: ' ';
      display: block;
      height: calc(100% - 26px);
      position: absolute;
      right: 0;
      width: 1px;
    }

    legend {
      @include font-size(12);

      background-color: transparent;
      color: $formcompact-label-text-color;
      float: left;
      margin-bottom: 8px;
      padding: 4px 9px 0;
      width: 100%;

      + .radio-label,
      + input[type='radio'],
      + .field-checkbox {
        clear: both;
      }
    }

    input[type='radio'] {
      @include font-size(18);

      background-color: transparent;
      color: $checkbox-color-unchecked-initial-font;
      padding: 0 9px 4px;
    }
  }

  .radio-label {
    padding-left: 33px;

    // zeroes out a rule from `_.radios.scss`
    &:first-of-type {
      margin-top: 0;
    }

    &::after {
      left: 12px;
    }
  }
}

.form-section-header {
  @include font-size(16);

  align-items: center;
  border-bottom: 1px solid $input-color-readonly-border;
  display: flex;
  font-weight: 700;
}

.is-firefox {
  .form-compact {
    // Reset the standard `16px` line-height rule established for Firefox
    // that comes from `_typography.scss`.
    input,
    textarea {
      line-height: normal;
    }
  }
}

// IE has different header padding needs
.ie {
  .form-compact {
    .column,
    .columns {
      &.form-section-header {
        padding: 16px 8px 15px;
      }
    }
  }
}

html[dir='rtl'] {
  .form-compact {
    .row {
      padding-left: 0;
      padding-right: inherit;
    }

    .one.column,
    .one.columns,
    .one-one-half.column,
    .one-one-half.columns,
    .two.columns,
    .three.columns,
    .four.columns,
    .five.columns,
    .six.columns,
    .seven.columns,
    .eight.columns,
    .nine.columns,
    .ten.columns,
    .eleven.columns,
    .twelve.columns,
    .full.column,
    .one-third.column,
    .two-thirds.column,
    .one-half.column {
      margin-left: 0;
      margin-right: 0;
    }

    .column,
    .columns {
      float: none;

      // =======================
      // Reversed border states
      // =======================
      input {
        border-left-style: solid;
        border-left-width: 1px;
        border-right-width: 0;
      }

      .checkbox-group,
      .radio-group {
        &::after {
          border-left-style: solid;
          border-left-width: 1px;
          border-right: 0;
          left: 0;
          right: auto;
        }
      }
    }

    // Reverse padding on radios
    .radio-label {
      padding-left: 0;
      padding-right: 33px;

      &::before {
        margin-right: -24px;
      }

      &::after {
        left: auto;
        right: 13px;
      }
    }

    // Checkboxes
    .checkbox-label {
      padding-right: 41px !important;
    }

    input.checkbox:checked,
    input.checkbox:checked + input[type='hidden'],
    span.checkbox > input:checked {
      + label::after {
        left: auto;
        right: 22px;
      }
    }

    label.inline .checkbox:checked ~ .label-text::after {
      left: auto;
      right: 22px;
    }
  }
}

@media (max-width: ($breakpoint-phone-to-tablet + 1)) {
  // Responsive View of Summary Area
  .form-compact-container {
    .banner {
      flex-direction: column;

      > * {
        align-items: center;
      }
    }

    .thumbnail {
      text-align: center;
    }
  }

  // Ensures a common min-height on headers
  .form-compact {
    .row {
      .column,
      .columns {
        min-height: 50px;
      }
    }
  }
}

// Overrides for the gutters in `../grid/_grid.scss`, which are not present
// on grids inside of the Form Compact component.
// For tabledevices larger than 550px
@media (min-width: $breakpoint-phone-to-tablet) {
  .form-compact-container {
    .summary-form {
      .column,
      .columns {
        margin-left: 0;

        .field:first-child {
          margin-top: 10px;
        }
      }
    }
  }

  .form-compact {
    padding-bottom: 20px;

    .row {
      display: flex;
      padding-right: 0;

      .row {
        padding-right: 20px;
      }
    }

    .column,
    .columns {
      padding: 0;

      &:first-child {
        .row {
          padding-left: 20px;
        }
      }
    }

    .one.column,
    .one.columns {
      margin-left: 0;
      width: 8.33333333333%;
    }

    .one-one-half.column,
    .one-one-half.columns {
      margin-left: 0;
      width: 12.499999999965%;
    }

    .two.columns {
      margin-left: 0;
      width: 16.6666666666%;
    }

    .three.columns {
      margin-left: 0;
      width: 25%;
    }

    .four.columns {
      margin-left: 0;
      width: 33.3333333333%;
    }

    .five.columns {
      margin-left: 0;
      width: 41.6666666666%;
    }

    .six.columns {
      margin-left: 0;
      width: 50%;
    }

    .seven.columns {
      margin-left: 0;
      width: 58.3333333333%;
    }

    .eight.columns {
      margin-left: 0;
      width: 66.6666666666%;
    }

    .nine.columns {
      margin-left: 0;
      width: 75%;
    }

    .ten.columns {
      margin-left: 0;
      width: 83.3333333333%;
    }

    .eleven.columns {
      margin-left: 0;
      width: 91.6666666666%;
    }

    .twelve.columns,
    .full.column {
      margin-left: 0;
      width: 100%;

      &.center {
        display: block;
        min-width: 300px;
        text-align: center;
      }
    }

    .one-fifth.column {
      margin-left: 0;
      width: 20%;
    }

    .one-fourth.column {
      margin-left: 0;
      width: 25%;
    }

    .one-third.column {
      margin-left: 0;
      width: 33.3333333%;
    }

    .two-thirds.column {
      margin-left: 0;
      width: 66.6666666666%;
    }

    .one-half.column {
      margin-left: 0;
      width: 50%;
    }
  }

  html[dir='rtl'] {
    .form-compact {
      .row {
        .row {
          padding-left: 20px;
        }
      }

      .column,
      .columns {
        &:first-child {
          .row {
            padding-right: 20px;
          }
        }
      }
    }
  }
}