/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Forms

## Basic inputs and labels

Our forms styles are **opt-in**, which means you need to add the right CSS
classes to inputs, labels, etc. to see the styles. (This prevents us from breaking
any existing Canvas forms CSS.) Inputs, selects, textareas, etc. should be
given the `.ic-Input` class, while labels should have the `.ic-Label` class.

The `.ic-Form-control` element provides positioning context and margin for
each label-input pair.

```html
<div class="ic-Form-control">
  <label for="demo-text-input-1" class="ic-Label">This is a label</label>
  <input type="text" id="demo-text-input-1" class="ic-Input" placeholder="Don't forget a helpful placeholder">
</div>
<div class="ic-Form-control">
  <label for="demo-text-input-2" class="ic-Label">This is another label</label>
  <select class="ic-Input" id="demo-text-input-2">
    <option>This is an option</option>
    <option>This is another option</option>
    <option>This is yet another option</option>
  </select>
</div>
```

## Radio buttons

### Radio button group

Radio button groups should be contained within their own `<fieldset>` with
the class `ic-Fieldset--radio-checkbox` and labeled with a `<legend>`.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Favorite flower
  </legend>
  <div class="ic-Form-control ic-Form-control--radio">
    <div class="ic-Radio">
      <input id="tulip" type="radio" value="tulip" name="flower" checked>
      <label for="tulip" class="ic-Label">Tulip</label>
    </div>
    <div class="ic-Radio">
      <input id="daisy" type="radio" value="daisy" name="flower">
      <label for="daisy" class="ic-Label">Daisy</label>
    </div>
    <div class="ic-Radio">
      <input id="daffodil" type="radio" value="daffodil" name="flower">
      <label for="daffodil" class="ic-Label">Daffodil</label>
    </div>
  </div>
</fieldset>
```

### Inline radio button group

Add the `ic-Form-control--radio-inline` class to the `ic-Form-control--radio`
element to make the radio buttons display inline.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Favorite Premier League team
  </legend>
  <div class="ic-Form-control ic-Form-control--radio ic-Form-control--radio-inline">
    <div class="ic-Radio">
      <input id="liverpool" type="radio" value="liverpool" name="epl" checked>
      <label for="liverpool" class="ic-Label">Liverpool</label>
    </div>
    <div class="ic-Radio">
      <input id="manutd" type="radio" value="manutd" name="epl">
      <label for="manutd" class="ic-Label">Manchester United</label>
    </div>
    <div class="ic-Radio">
      <input id="astonvilla" type="radio" value="astonvilla" name="epl" disabled>
      <label for="astonvilla" class="ic-Label">Aston Villa (relegated)</label>
    </div>
    <div class="ic-Radio">
      <input id="otherteam" type="radio" value="otherteam" name="epl">
      <label for="otherteam" class="ic-Label">Another team</label>
    </div>
  </div>
</fieldset>
```

## Checkboxes

### Basic checkbox
For these to work properly, make sure the ``for`` attribute of the ``label`` matches the ``id``
of the ``checkbox`` element. If you want to use default checkboxes, the existing Bootstrap 2.x
styles have been left unchanged.

```html
<div class="ic-Form-control ic-Form-control--checkbox">
  <input type="checkbox" id="freecandy">
  <label class="ic-Label" for="freecandy">Yes, I want free candy</label>
</div>
```

### Checkbox group
Checkbox groups should be contained within their own `<fieldset>` with
the class `ic-Fieldset--radio-checkbox` and labeled with a `<legend>`.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Major label artists you admire
  </legend>
  <div class="ic-Checkbox-group">
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="beyonce">
      <label class="ic-Label" for="beyonce">Beyonce</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="coldplay">
      <label class="ic-Label" for="coldplay">Coldplay</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="mariah">
      <label class="ic-Label" for="mariah">Mariah Carey</label>
    </div>
  </div>
</fieldset>
```

### Inline checkbox group
Add the `ic-Checkbox-group--inline` class to the `ic-Checkbox-group`
element to make the checkboxes display inline.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Major label artists you admire
  </legend>
  <div class="ic-Checkbox-group ic-Checkbox-group--inline">
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="beyonce2">
      <label class="ic-Label" for="beyonce2">Beyonce</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="coldplay2">
      <label class="ic-Label" for="coldplay2">Coldplay</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="mariah2">
      <label class="ic-Label" for="mariah2">Mariah Carey</label>
    </div>
  </div>
</fieldset>
```
*/

$ic-Input-border: lighten($ic-color-dark, 65);
@if $use_high_contrast { $ic-Input-border: $ic-color-dark; }

$ic-Input-standard-height: 38px;

@mixin ic-input-variant($border-color, $color, $outline-color: rgba($color, 0.2)) {
  border-color: $border-color;
  &:focus {
    border-color: $color;
    @if not $use_high_contrast {
      outline-color: $outline-color;
    }
  }
}

@mixin high-contrast-focus {
  @if $use_high_contrast {
    outline: 1px dotted $ic-color-dark;
    outline-offset: -1px;
  }
}

select, textarea,
input[type="text"], input[type="password"],
input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"],
input[type="time"], input[type="week"],
input[type="number"], input[type="email"],
input[type="url"], input[type="search"],
input[type="tel"], input[type="color"], .uneditable-input {

  // .ic-Input is the base class for the updated form controls.

  &.ic-Input {
    // Overwrite legacy forms styles from Bootstrap 2.
    width: 100%; height: $ic-Input-standard-height;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: none;
    box-sizing: border-box;

    // Establish the basic styles for Canvas text-type inputs
    transition: all 0.2s ease-out;
    border-width: 1px;
    border-style: solid;
    outline-color: transparent;
    outline-offset: -$ic-sp;
    background: $ic-color-light;
    padding: 8px 12px;

    // Remove the webkit gloss in iOS
    -webkit-appearance: none;

    @include ic-input-variant($ic-Input-border, var(--ic-brand-primary), var(--ic-brand-primary-lightened-15));

    @if $use_high_contrast {
      outline-style: dotted;
      outline-width: 1px;
    }
    @else {
      outline-style: solid;
      outline-width: $ic-sp;
    }

    // Focus state
    &:focus {
      @if $use_high_contrast {
        outline-width: 1px;
        outline-offset: -3px;
        outline-color: $ic-color-dark;
      }
      @else {
        outline-width: 2px;
        outline-offset: -2px;
      }
    }

    // If a form message follows the input, bump it up a bit to overlap with the input
    ~ .ic-Form-message { transform: translate3d(0,-$ic-sp/3,0); }

    // Focus then moves the form message out of the way
    &:focus {
      ~ .ic-Form-message { transform: translate3d(0,$ic-sp/2,0); }
    }

    // Disabled state
    &[disabled], &[readonly] {
      cursor: not-allowed;
      background-color: lighten($ic-color-neutral, 5%);
      opacity: 0.8;
    }

    // Input variants
    &.ic-Input--has-error, .ic-Form-control--has-error & { @include ic-input-variant($ic-color-danger, $ic-color-danger); }
    &.ic-Input--has-warning, .ic-Form-control--has-warning & { @include ic-input-variant($ic-color-alert, $ic-color-alert); }
    &.ic-Input--has-success, .ic-Form-control--has-success & { @include ic-input-variant($ic-color-success, $ic-color-success); }

  }

}

// special styles for select
select.ic-Input, input[type="file"].ic-Input {
  padding: direction-sides(0 0 0 $ic-sp);
}

// special styles for textarea
textarea.ic-Input {
  height: auto;
  resize: vertical;
}

// We removed -webkit-appearance from anything with the
// .ic-Input class, to give us more styling control.
// This makes the select's caret disappear.
// So we add it back in with these hacks.

@mixin add-arrow-for-webkit-and-ie-edge($bg-position-x) {
  background-color: $ic-color-light;
  background-image: url("/images/forms/ic-icon-arrow-down.svg");
  background-repeat: no-repeat;
  background-size: 10px 5.667px;
  background-position: $bg-position-x 50%;
  padding: direction-sides(0 $ic-sp*2 0 $ic-sp);
}

// non-Edge hack
select.ic-Input {
  @include add-arrow-for-webkit-and-ie-edge( calc(100% - #{$ic-sp - 4}) );
}

// IE Edge hack (doesn't support calc here, so we need to use a percentage)
@supports (-ms-accelerator:true) {
  select.ic-Input { @include add-arrow-for-webkit-and-ie-edge(99%); }
}


.ic-Form-group {

  &.ic-Form-group--inline {

    @include breakpoint(tablet) {
      display: flex;
      align-items: flex-end;

      .ic-Form-actions {
        margin-top: 0;
        border: none;
        padding: direction-sides(0 0 0 $ic-sp);
        background: transparent;
      }
      .ic-Form-control:not(.ic-Form-control--checkbox):not(.ic-Form-control--radio),
      .ic-Checkbox-group {
        flex: 1;
        margin: 0 $ic-sp/2;
        &:first-child { margin-#{direction(left)}: 0; }
        &:last-child { margin-#{direction(right)}: 0; }

        .ic-Form-message { margin-#{direction(left)}: 0; }
      }

    }
  }

  &.ic-Form-group--horizontal {
    @include breakpoint(tablet) {

      > .ic-Form-control {

        &:not(.ic-Form-control--checkbox):not(.ic-Form-control--radio) {
          display: flex;
          flex-wrap: wrap;

          > .ic-Label {
            margin-bottom: 0;
            flex: 0 0 $ic-horizontal-form-offset;
            padding-#{direction(right)}: $ic-sp*2;
          }

          > .ic-Input,
          > .ic-Input-group,
          > .ic-Multi-input,
          > .ic-Forms-component { flex: 1; }

          > .ic-Form-message {
            display: block;
            margin-#{direction(left)}: 0;
            width: 100%;
            .ic-Form-message__Layout {
              margin-#{direction(left)}: $ic-horizontal-form-offset + $ic-sp;
              display: inline-flex;
            }
          }

          > .ic-Form-help-text {
            padding-#{direction(left)}: $ic-horizontal-form-offset;
          }
        }

        &:not(.ic-Form-control--checkbox):not(.ic-Form-control--radio):not(.ic-Form-control--top-align-label) {
          align-items: center;
        }

        &.ic-Form-control--top-align-label > .ic-Label {
          transform: translateY(2px);
        }
      }

      > .ic-Fieldset--radio-checkbox {
        position: relative;
        padding-#{direction(left)}: $ic-horizontal-form-offset;
        min-height: 30px;

        > .ic-Legend {
          position: absolute;
          top: 5px; #{direction(left)}: 0;
          width: $ic-horizontal-form-offset - ($ic-sp * 2);
          margin-bottom: 0;
        }
      }
    }

  }

}

@mixin form-message-variant($color) {
  .ic-Form-message__Layout {
    background: $color;
    &:before {
      background: darken($color, 5%);
      border-#{direction(right)}: 1px solid darken($color, 12%);
    }
    &:after { border-bottom-color: darken($color, 5%); }
  }
}

.ic-Form-message {
  display: inline-block;
  margin-#{direction(left)}: $ic-sp;
  position: relative;
  z-index: 1;
  transition: all 0.2s $ic-transition;
  box-sizing: border-box;
  &.ic-Form-message--error { @include form-message-variant($ic-color-danger); }
  &.ic-Form-message--success { @include form-message-variant($ic-color-success); }
  &.ic-Form-message--warning { @include form-message-variant($ic-color-alert); }
}

// Make error message styles work with ic-Super-toggle
.ic-Form-group:not(.ic-Form-group--horizontal) [class^="ic-Super-toggle--"] + .ic-Form-message {
  display: block;
  margin-#{direction(left)}: 0;
  .ic-Form-message__Layout { display: inline-flex; }
}

.ic-Input-group + .ic-Form-message { margin-#{direction(left)}: 0; }

.ic-Form-message__Layout {
  position: relative;
  display: flex;
  align-items: center;
  padding: direction-sides(($ic-sp - 4) ($ic-sp - 4) ($ic-sp - 4) 0);
  @include fontSize($ic-font-size--xsmall);
  line-height: 1.2;
  color: $ic-color-light;
  box-shadow: 0 2px 2px rgba(black, 0.2);
  box-sizing: border-box;

  &:before {
    content: "";
    width: 32px;
    height: 100%;
    position: absolute;
    #{direction(left)}: 0; top: 0;
    box-sizing: border-box;
  }

  &:after {
    bottom: 100%; #{direction(left)}: 16px;
    border: solid transparent;
    content: "";
    height: 0; width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(white, 0);
    border-width: $ic-sp/2;
    margin-#{direction(left)}: -($ic-sp/2);
    box-sizing: border-box;
  }

  // specifying link color here, just in case we need a link inside a form message
  a {
    color: $ic-color-light;
    text-decoration: underline;
    &:hover, &:focus {
      color: $ic-color-light;
      text-decoration: none;
    }
  }

  i[class*=icon-], i[class^=icon-] {
    width: 32px; height: auto;
    flex: 0 0 32px;
    line-height: 1;
    margin-#{direction(right)}: $ic-sp - 4;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// Overwrite default margin on form element
form.ic-Form-group { margin: 0; }

.ic-Form-control {
  display: block;
  box-sizing: border-box;
  margin-bottom: $ic-sp*1.5;
  position: relative;
  display: block;

  .ic-Form-control--radio {
    margin-bottom: 0;
  }

  &.ic-Form-control--checkbox-inline,
  &.ic-Form-control--radio-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .ic-Form-message__Layout:after { display: none; }

    &.ic-Form-control--checkbox,
    .ic-Radio { padding-#{direction(right)}: $ic-sp*1.5; }
  }

  &.ic-Form-control--has-error {
    .ic-Label,
    .ic-Input-group__add-on {
      color: $ic-color-danger;
    }
  }

  &.ic-Form-control--has-warning {
    .ic-Label,
    .ic-Input-group__add-on {
      color: $ic-color-alert;
    }
  }

  &.ic-Form-control--has-success {
    .ic-Label,
    .ic-Input-group__add-on {
      color: $ic-color-success;
    }
  }
}

.ic-Multi-input {
  @include breakpoint(mini-tablet) {
    display: flex;
    align-items: center;

    > .ic-Input,
    > .ic-Input-group {
      margin: 0 $ic-sp/3;
      flex: 1;
      &:first-child { margin-#{direction(left)}: 0; }
      &:last-child { margin-#{direction(right)}: 0; }
    }
  }
}

.ic-Label {
  box-sizing: border-box;
  user-select: none;
  margin: 0 0 $ic-sp/2;
  display: block;
  line-height: $ic-label-line-height;
  font-weight: bold;
  @include fontSize($ic-font-size--small);
}

.ic-Form-actions {
  box-sizing: border-box;
  margin-top: $ic-sp;
  border: 1px solid $ic-border-light;
  padding: $ic-sp;
  text-align: direction(right);
  background: darken($ic-color-light, 3%);
  white-space: nowrap;
}

.ic-Fieldset {
  box-sizing: border-box;
  margin: 0 0 $ic-sp*1.5;
  padding: 0;
  border: none;
  width: 100%;

  // when the fieldset contains a radio or checkbox group, use this class
  // to give the legend the appearance of a label
  &.ic-Fieldset--radio-checkbox {
    margin-bottom: $ic-sp*1.75;

    .ic-Legend {
      margin-bottom: $ic-sp/2;
      font-weight: bold;
      @include fontSize($ic-font-size--small);
      border-bottom: none;
      padding-bottom: 0;
    }

    .ic-Form-control--radio {
      margin-bottom: 0;
    }
  }
}

.ic-Legend {
  box-sizing: border-box;
  width: 100%;
  border: none;
  padding: 0 0 $ic-sp/2;
  margin: 0 0 $ic-sp*2;
  @include fontSize(18px);
  line-height: $ic-label-line-height;
  color: $ic-font-color-dark;
  border-bottom: 1px solid $ic-border-light;
}

.ic-Radio {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;

  .ic-Label {
    margin: 0;
    position: relative;
    z-index: 1;
    padding: direction-sides($ic-sp/3 0 $ic-sp/3 $ic-radio-checkbox-left-offset);
    font-weight: normal;
    display: inline-block;

    &:before {
      transition: all 0.2s ease-out;
      content: "";
      box-sizing: border-box;
      border-radius: 100%;
      width: 16px; height: 16px;
      border: 1px solid $ic-Input-border;
      position: absolute;
      top: 5px; #{direction(left)}: 0;
      background: $ic-color-light;
    }

  }

  ~ .ic-Form-message { margin-#{direction(left)}: $ic-radio-checkbox-left-offset; }

  input[type="radio"] {
    opacity: 0;
    position: absolute;
    top: 0; #{direction(left)}: 0;

    // overwrite Bootstrap
    ~ .ic-Label { vertical-align: baseline; }

    &:not([disabled]):hover {
      ~ .ic-Label:before { border-color: var(--ic-brand-primary); }
    }

    &:checked {
      ~ .ic-Label:before {
        border-color: var(--ic-brand-primary);
        box-shadow: inset 0 0 0 3px $ic-color-light;
        background: var(--ic-brand-primary);
      }
    }

    &:focus {
      ~ .ic-Label {
        @include high-contrast-focus;
        &:before {
          box-shadow: inset 0 0 0 2px var(--ic-brand-primary-lightened-15), inset 0 0 0 4px $ic-color-light;
          background: var(--ic-brand-primary);
        }
      }
    }

    &[disabled] {
      ~ .ic-Label {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }
    }
  }

  &.ic-Radio--icon-only {
    height: 2.75rem;

    .ic-Label {
      transition: all 0.2s;
      padding: 0.5rem;
      background-color: $ic-color-light;
      border: 2px solid transparent;
      border-radius: $borderRadius;
      color: $ic-font-color-dark;

      &:hover {
        border-color: $ic-border-light;
      }

      &:before {
        display: none;
      }

      > svg {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    input[type="radio"] {
      &:checked {
        ~ .ic-Label {
          border-color: var(--ic-brand-primary);
          color: var(--ic-brand-primary);
        }
      }
      &:focus {
        ~ .ic-Label {

          @if $use_high_contrast {
            outline: 1px dotted $ic-color-dark;
            outline-offset: -5px;
          }
          @else {
            box-shadow:
              inset 0 0 0 3px var(--ic-brand-primary-lightened-15);
          }

        }
      }
    }
  }
}

.ic-Checkbox-group {

  &.ic-Checkbox-group--inline {
    @include breakpoint(tablet) {
      display: flex;
      flex-wrap: wrap;
      .ic-Form-control.ic-Form-control--checkbox {
        margin-#{direction(right)}: $ic-sp*1.5;
      }
      .ic-Form-message { display: block; }
    }
  }

}

.ic-Form-control.ic-Form-control--checkbox {
  line-height: 1;
  margin-bottom: 0;

  &.ic-Form-control--has-error,
  &.ic-Form-control--has-success,
  &.ic-Form-control--has-warning {
    .ic-Label { display: block; }
  }

  .ic-Label {
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    padding: direction-sides($ic-sp/3 0 $ic-sp/3 $ic-radio-checkbox-left-offset);
    font-weight: normal;
    display: inline-block;

    &:before {
      content: "";
      transition: border-color 0.2s ease-out, outline-offset 0.2s ease-out, outline-color 0.2s ease-out;
      box-sizing: border-box;
      position: absolute;
      top: 5px; #{direction(left)}: 0;
      width: 16px; height: 16px;
      border-radius: $baseBorderRadius;
      background: url("/images/forms/ic-checkbox-bg.svg") no-repeat center bottom $ic-color-light;
      background-size: 16px 48px;
      border: 1px solid $ic-Input-border;
      outline: 2px solid transparent;
      outline-offset: -12px;
    }
  }

  .ic-Form-message {
    margin-#{direction(left)}: $ic-radio-checkbox-left-offset;
    vertical-align: middle;
  }

  input[type="checkbox"] {
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0; #{direction(left)}: 0;

    &:not([disabled]):hover {
      ~ .ic-Label:before { border-color: var(--ic-brand-primary); }
    }

    &:focus {
      ~ .ic-Label {
        @include high-contrast-focus;
        &:before {
          border-color: var(--ic-brand-primary);
          outline-offset: -3px;
          outline-color: var(--ic-brand-primary-lightened-15);
        }

      }
    }

    &:checked {
      ~ .ic-Label {
        &:before {
          background-color: var(--ic-brand-primary);
          background-position: center -1px;
          border-color: var(--ic-brand-primary);
        }
      }
      &:focus {
        ~ .ic-Label:before {
          outline-color: rgba($ic-color-light, 0.35);
        }
      }
    }

    &[disabled] {
      ~ .ic-Label {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }
    }

  }
}

.ic-Input-group {
  display: flex;
  box-sizing: border-box;

  .ic-Action-header__Primary & { flex: 1; }

  .ic-Input {
    width: auto;
    flex: 1;

    &:not(:first-child) {
      border-top-#{direction(left)}-radius: 0;
      border-bottom-#{direction(left)}-radius: 0;
    }
    &:not(:last-child) {
      border-top-#{direction(right)}-radius: 0;
      border-bottom-#{direction(right)}-radius: 0;
    }
  }

  .Button {

    &:first-child {
      border-top-#{direction(right)}-radius: 0;
      border-bottom-#{direction(right)}-radius: 0;
      &:not(.Button--primary):not(.Button--secondary):not(.Button--success):not(.Button--warning):not(.Button--danger) { border-#{direction(right)}: none; }
    }

    &:last-child {
      border-top-#{direction(left)}-radius: 0;
      border-bottom-#{direction(left)}-radius: 0;
      &:not(.Button--primary):not(.Button--secondary):not(.Button--success):not(.Button--warning):not(.Button--danger) { border-#{direction(left)}: none; }
    }
  }

  .ic-Input-group__add-on,
  .ic-Label {
    height: $ic-Input-standard-height;
    background: $ic-color-light;
    border: 1px solid $ic-Input-border;
    display: flex;
    align-items: center;
    padding: $ic-sp/2 ($ic-sp - 4);

    &:first-child {
      border-#{direction(right)}: none;
      border-top-#{direction(left)}-radius: $baseBorderRadius;
      border-bottom-#{direction(left)}-radius: $baseBorderRadius;
    }
    &:last-child {
      border-#{direction(left)}: none;
      border-top-#{direction(right)}-radius: $baseBorderRadius;
      border-bottom-#{direction(right)}-radius: $baseBorderRadius;
    }
  }

  .ic-Input-group__add-on {
    color: $ic-font-color--subdued;
    box-sizing: border-box;
  }

  .ic-Label { margin-bottom: 0; }

}

.ic-Action-header {
  margin-bottom: $ic-sp*2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: start;

  &.ic-Action-header--before-item-groups {
    margin-bottom: 0;
    padding-bottom: $ic-sp;
    border-bottom: 1px solid $ic-border-light;
  }

  @include breakpoint(tablet) {
    align-items: center;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-between;

    .ic-Action-header__Primary {
      flex-grow: 1;
      margin-bottom: 0;
      box-sizing: border-box;
    }

    .ic-Action-header__Secondary {
      box-sizing: border-box;
      text-align: direction(right);
      &--auto {
        flex: 0 0 auto;
      }
      > .Button,
      > .btn,
      > .ui-button { margin-#{direction(left)}: $ic-sp/4; }
    }

    .ic-Action-header__Primary + .ic-Action-header__Secondary {
      padding-#{direction(left)}: $ic-sp*2;
    }
  }
}

.ic-Action-header__Heading {
  margin: 0;
  hyphens: auto;
  word-break: break-all;
}

.ic-Action-header__Primary {
  margin-bottom: $ic-sp/2;
}

.ic-Form-action-box {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  margin-bottom: $ic-sp*2;
  @include breakpoint(desktop) { margin-bottom: $ic-sp; }

  .ic-Form-control {
    margin-bottom: $ic-sp/2;
    @include breakpoint(desktop) {
      margin: 0 $ic-sp/3;
      flex: 1;
      &:first-child { margin-#{direction(left)}: 0; }
      &:last-of-type { margin-#{direction(right)}: 0; }
    }
  }

}

.ic-Form-action-box__Form {
  flex: 1;
  box-sizing: border-box;
  @include breakpoint(desktop) {
    display: flex;
    align-items: center;
  }
}

.ic-Form-action-box__Actions {
  box-sizing: border-box;
  @include breakpoint(desktop) {
    padding-#{direction(left)}: $ic-sp*4;
  }
}

.ic-Form-help-text {
  @include fontSize(12px);
  display: block;
  margin-top: $ic-sp/2;
  color: $ic-font-color--subdued;
  width: 100%;
  line-height: 1.5;
}
