signal-desktop/stylesheets/components/Select.scss

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.module-select {
  position: relative;

  select {
    @include mixins.font-body-2;
    -webkit-appearance: none;
    border-radius: 4px;
    border: 1px solid variables.$color-gray-25;
    cursor: pointer;
    height: 40px;
    min-width: 124px;
    outline: 0;
    padding: 10px;
    padding-inline: 12px 32px;
    text-overflow: ellipsis;
    width: 100%;

    @include mixins.dark-theme {
      background-color: variables.$color-gray-90;
      border-color: variables.$color-gray-60;
      color: variables.$color-gray-05;
    }

    @include mixins.keyboard-mode {
      &:focus {
        border: 3px solid variables.$color-ultramarine;
        line-height: 14px;
        padding-inline-start: 10px;
      }
    }
  }

  &::after {
    content: ' ';
    display: block;
    height: 16px;
    pointer-events: none;
    position: absolute;
    inset-inline-end: 8px;
    top: 11px;
    width: 16px;
    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/dropdown/dropdown-compact-light.svg',
        variables.$color-gray-60
      );
    }

    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/dropdown/dropdown-compact-light.svg',
        variables.$color-gray-15
      );
    }
  }
}