// Name:            Select
// Description:     Select in website's forms
//
// Component:       `c-form-select`
//
// ========================================================================
@use '../../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../../assets/sass/settings/v7/global' as *;

@use '../../../../assets/sass/tools/v7/mq' as *;
@use '../../../../assets/sass/tools/v7/utils' as *;
@use '../../../../assets/sass/tools/v7/typography' as *;
@use '../../../../assets/sass/tools/v7/zindex' as *;

// @use '../../../../assets/sass/objects/v7/links' as *;
// @use '../../../../assets/sass/objects/v7/icons' as *;

// Variables
// ========================================================================

$select-icon-size: 16px;

// ========================================================================

select {
  padding-right: $padding-xlarge;
  background-image: var(--form-select-icon); 
  background-repeat: no-repeat;
  background-position: center right $padding-small;
  background-size: $select-icon-size;
  color: var(--body-color);
  @include appearance(none);
  @include user-select(none);

  optgroup {
    background-color: var(--background-color-light);
  }

  option {
    @include type(label-03);
    &{
      background-color:var( --background-color-gray-dark);
    }
  }

  &:focus {
    --form-input-bg: inherit;
    box-shadow: 0;
  }
}