@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
@use '@beeline/design-tokens/scss/tokens/globals';
@use '@beeline/design-tokens/scss/tokens/themes' as theme;

.textfield {
  display: block;
  position: relative;
  width: 100%;
  height: globals.$size-control-height-medium;
  border: globals.$size-border-width-regular solid transparent;
  padding-top: $textfield-without-label-medium-text-margin-vertical;
  padding-bottom: $textfield-without-label-medium-text-margin-vertical;
  background-color: theme.$color-control-background;
  border-radius: 12px; // globals.$size-border-radius-x6;

  &:hover {
    background-color: theme.$color-control-background-hover;
  }

  // input
  input {
    outline: none;
    box-shadow: none;
  }

  // label
  &--with-label {
    // padding-top: $textfield-with-label-medium-text-margin-top;
    // padding-bottom: $textfield-with-label-medium-text-margin-bottom;
  }

  &__label {
    // padding-top: $textfield-medium-label-margin-top;

    &.textfield__label--floated {
      // padding-top: $textfield-medium-label-margin-top-floated;
    }
  }

  // small
  &--small {
    height: globals.$size-control-height-small;
  }

  // large
  &--large {
    height: globals.$size-control-height-large;
    padding-top: $textfield-without-label-large-text-margin-vertical;
    padding-bottom: $textfield-without-label-large-text-margin-vertical;

    &.textfield--with-label {
      padding-top: $textfield-with-label-large-text-margin-top;
      padding-bottom: $textfield-with-label-large-text-margin-bottom;
    }

    .textfield__label {
      padding-top: $textfield-large-label-margin-top;

      &.textfield__label--floated {
        padding-top: $textfield-large-label-margin-top-floated;
      }
    }
  }

  // states
  &--focused {
    border-color: theme.$color-border-focus;
    background-color: theme.$color-background-base;
  }
}