@use 'sass:map';
// @use "@beeline/design-tokens/scss/tokens/globals";
@use '@beeline/design-tokens/scss/tokens/themes/light';
@use '@beeline/design-tokens/scss/tokens/themes/dark';

%input-textarea {
  box-shadow: none;
  border: 1px solid transparent;
  color: map.get(light.$theme, 'color-text-active');
  background: map.get(light.$theme, 'color-control-background');

  &:hover {
    border-color: map.get(light.$theme, 'color-border-focus');
  }

  .dark-theme & {
    color: map.get(dark.$theme, 'color-text-active');
    background: map.get(dark.$theme, 'color-control-background');

    &:hover {
      border-color: map.get(dark.$theme, 'color-border-focus');
    }
  }

  &:focus,
  &.is-focused,
  &:active,
  &.is-active {
    box-shadow: none !important;
    border-color: map.get(light.$theme, 'color-border-focus');
    background: map.get(light.$theme, 'color-background-base');

    .dark-theme & {
      background: map.get(dark.$theme, 'color-background-base');
      border-color: map.get(dark.$theme, 'color-border-focus');
    }
  }
}

.input {
  @extend %input-textarea;
}

.textarea {
  @extend %input-textarea;
}
