@use '@funidata/fudis-core' as core;

.fudis-datepicker {
  width: 100%;

  &__input-wrapper {
    position: relative;
  }

  &__input {
    @include core.border('1px', 'solid', 'gray-dark');
    @include core.border-radius('2px');
    @include core.text-field-input;

    box-sizing: border-box;
    padding: 0 0 0 core.$spacing-xs;
    width: 100%;
    height: core.$spacing-xl;

    &:focus {
      @include core.focus-form-field;
    }
  }

  &__toggle {
    display: flex;
    position: absolute;
    top: 50%;
    right: core.$spacing-xxs;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }

  &__datepicker {
    @include core.bg-color('white');
    @include core.border('1px', 'solid', 'gray-dark');
  }

  &__guidance {
    &__help-text {
      @include core.text-color('gray-dark');
      @include core.body-text-sm-regular;

      margin-top: core.$spacing-xs;
    }
  }
}