@import "../settings/variables";
@import "../tools/icons";
@import "../tools/typography";

.field {
  &__layout {
    &__container {
      margin: spacing(sm) spacing(xs);
      position: relative;

      &--error {
        position: static;
        background-color: $field-error-background-color;

        &:hover {
          background: $field-error-background-color;
        }

        &:focus {
          background-color: $field-focus-background-color;
        }
      }

      &--xs {
        width: 36px;
      }
      &--sm {
        width: 48px;
      }
      &--md {
        width: 80px;
      }
      &--lg {
        width: 112px;
      }

      &--block {
        position: relative;

        .field__layout__error-box {
          width: 100%;
          max-width: 100%;
        }
      }
    }

    &__error-box {
      @include xs-regular-italic--white;
      background: $core-red-50;
      border-radius: 0 2px 2px 2px;
      box-shadow: shadow(20);
      padding: 6px spacing(md);
      position: absolute;
      max-width: 160px;
      top: calc(100% - 1px);
      z-index: 1;

      &--xs {
        min-width: 36px;
      }
      &--sm {
        min-width: 48px;
      }
      &--md {
        min-width: 80px;
      }
      &--lg {
        min-width: 112px;
      }
      &--block {
      }
    }

    &__loading {
      align-items: center;
      background: $core-gray-96;
      display: flex;
      height: 100%;
      justify-content: center;
      opacity: 0.9;
      position: absolute;
      width: 100%;
      z-index: 2;
    }
  }
}