@import '~wri-api-components/dist/bundle.css';
@import 'styles/settings';
@import 'styles/functions';

.c-field {
  display: inline-block;
  width: 100%;

  -webkit-font-smoothing: antialiased;
  font-family: $font-family-1;

  > .label-container {
    display: flex;
    align-items: center;

    > label {
      font-size: $font-size-big;
      color: currentColor;

      & + * {
        margin: 0 0 0 $space-1;
      }
    }
  }

  > .field-container {
    margin: $space-1 * 2 0 0;
  }

  // themes
  &.-light {
    color: palette(white);
  }

  &.-dark {
    color: palette(gray, dark);
  }

  // modificators
  &.-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;

    > .field-container {
      margin: 0;
    }
  }

  &.-full-width {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &.-bolder {
    font-weight: $font-weight-semi-bold;
  }

  &.-bigger {
    > label {
      font-size: $font-size-extrabig;
    }
  }

  &.-higher-margin-top {
    > .field-container {
      margin: $space-1 * 4 0 0;
    }
  }

  // disabled styles
  &.-disabled {
    &.-light {
      color: rgba(palette(white), .4);
    }

    &.-dark {
      color: rgba(palette(gray, dark), .4);
    }
  }
}