punchcard-cms/punchcard

.form {
  margin-top: 0;
  @include breakpoint(setting-get('responsive form')) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  &--alert {
    background-color: color('red', 10);
    border-radius: 5px;
    color: color('red', 60);
    font-size: ms(-1);
    margin-bottom: .5em;
    padding: .5em .8em;
    position: relative;

    &::after {
      @include triangle(color('red', 10), 1em, 2em, 180);
      bottom: -10px;
      content: '';
      position: absolute;
      right: 1em;
    }
  }

  &--description {
    color: color('grey', 60);
    font-size: ms(-1);
    font-style: italic;
    margin-top: setting-get('rhythm') / 2;
  }

  &--field {
    margin-top: setting-get('rhythm') / .5;
  }

  &--fieldset {
    border: setting-get('input border width') solid setting-get('primary accent color');
    margin-top: setting-get('rhythm') / .5;
    padding: 0 setting-get('rhythm') / .75 setting-get('rhythm') / .75 setting-get('rhythm') / .75;
    @include breakpoint(setting-get('responsive form')) {
      padding: 0 setting-get('rhythm') / .5 setting-get('rhythm') / .5 setting-get('rhythm') / .5;
    }

    +:first-child {
      margin-top: setting-get('rhythm') / 2;
    }
  }

  &--field-container {
    background-color: color('white');
    margin-top: setting-get('rhythm') / .5;
    padding: setting-get('rhythm') / .75;
    @include breakpoint(setting-get('responsive form')) {
      padding: setting-get('rhythm') / .5;
      width: 48%;
    }

    :first-child {
      margin-top: 0;
    }
  }

  &--publish-container {
    background-color: color('white');
    margin-top: setting-get('rhythm') / .5;
    order: 0;
    padding: setting-get('rhythm') / .75;

    @include breakpoint(setting-get('responsive form')) {
      background-color: transparent;
      padding: 0;
      width: 48%;
    }
  }

  &--publish-fields {

    @include breakpoint(setting-get('responsive form')) {
      background-color: color('white');
      order: 1;
      padding: setting-get('rhythm') / .5;
    }

    :first-child {
      margin-top: 0;
    }
  }

  &--legend {
    background-color: color('white');
    border: setting-get('input border width') solid color('white');
    border-radius: setting-get('input border radius');
    color: color('black', 100);
    font-weight: setting-get('bold font weight');
    padding: 0 setting-get('rhythm');
    transform: translateX(setting-get('rhythm') / -1);
  }

  &--actions {
    margin-top: setting-get('rhythm') / .5;
    width: 100%;
    @include breakpoint(setting-get('responsive form')) {
      flex-grow: 1;
      order: 2;
    }
  }

  [type='date'],
  [type='datetime'],
  [type='datetime-local'],
  [type='email'],
  [type='month'],
  [type='number'],
  [type='password'],
  [type='search'],
  [type='tel'],
  [type='text'],
  [type='time'],
  [type='url'],
  [type='week'] {
    @include input;
  }

  [type='checkbox'] {
    @include checkbox;
  }

  [type='color'] {
    @include input;
    min-height: 2em;
    padding: 0;
    width: 5em;
  }

  label {
    font-weight: setting-get('bold font weight');
  }

  option {
    margin-top: 0;
  }

  select {
    @include input;
    border-radius: 0;
  }

  [type='radio'] {
    @include radio;
  }

  [type='range'] {
    @include range;
    @include range--thumb('webkit', 'slider');
    @include range--thumb('moz', 'range');
  }

  textarea {
    @include input;
  }

  &--button,
  &--submit {
    @include button(setting-get('primary accent color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary color'), setting-get('primary color'));

    margin-top: 0;
  }

  &--cancel {
    @include link(setting-get('primary color'), setting-get('primary color'), setting-get('secondary link color'), setting-get('secondary link color'));
    margin: setting-get('rhythm') / 2 0 0 setting-get('rhythm');
  }

  &--reset {
    @include button(setting-get('primary color'), setting-get('primary color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary accent color'), setting-get('primary accent color'), setting-get('primary color'));
  }
}

.required {

  &--save {
    background-color: setting-get('primary support color');
    font-weight: setting-get('normal font weight');
  }

  &--publish {
    background-color: setting-get('secondary support color');
    font-weight: setting-get('normal font weight');
  }
}