initial

layers/ui/components/select/styles.scss

@@ -0,0 +1,194 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.ui-select {
+  $self: &;
+
+  position: relative;
+  width: 169px;
+
+  &__wrapper {
+    display: grid;
+    grid-template-areas: 'label chevron' 'content chevron';
+    grid-template-columns: 1fr auto;
+    column-gap: 8px;
+    align-items: center;
+    padding: 8px 16px;
+    border-radius: 12px;
+    cursor: pointer;
+    background-color: var(--select-background);
+    transition: .2s ease-out;
+    transition-property: background-color, border-radius, box-shadow;
+    outline: none;
+
+    &:focus-visible,
+    &:hover {
+      background-color: var(--select-hover-background);
+    }
+
+    &:active {
+      background-color: var(--select-active-background);
+    }
+
+    #{$self}.is-active & {
+      border-radius: 12px 12px 0 0;
+      box-shadow: 0 4px 4px 0 #6C86AD40;
+    }
+  }
+
+  &__label {
+    @include txt-s-m;
+
+    grid-area: label;
+    color: var(--select-label-color);
+    transition: color .2s ease-out;
+    user-select: none;
+
+    #{$self}.is-active &,
+    #{$self}__wrapper:hover &,
+    #{$self}__wrapper:focus-visible & {
+      color: var(--select-label-hover-color);
+    }
+  }
+
+  &__content {
+    display: flex;
+    grid-area: content;
+  }
+
+  &__control {
+    @include txt-i-m;
+
+    background: none;
+    color: var(--select-color);
+    padding: 0;
+    border: none;
+    width: 100%;
+    outline: none;
+    cursor: pointer;
+    user-select: none;
+    pointer-events: none;
+    appearance: none;
+
+    &::placeholder {
+      color: var(--select-color);
+    }
+  }
+
+  &__clear {
+    color: var(--select-clear-color);
+    transition: color .2s ease-out;
+
+    &:hover {
+      color: var(--select-clear-hover-color);
+    }
+  }
+
+  &__chevron {
+    color: var(--select-chevron-color);
+    grid-area: chevron;
+  }
+
+  &__popper {
+    width: 100%;
+    z-index: 6500;
+  }
+
+  &__dropdown {
+    border-radius: 0 0 12px 12px;
+    overflow: hidden;
+    background-color: $clr-white;
+    box-shadow: 0 4px 4px 0 #6C86AD40;
+  }
+
+  &__search {
+    padding: 8px 16px;
+  }
+
+  &__items-scroller {
+    max-height: calc(44px * 4);
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__bottom {
+    @include txt-s-m;
+
+    margin-top: 4px;
+    padding-inline: 16px;
+  }
+
+  &__validation-message {
+    color: var(--input-validation-message-color);
+  }
+
+  &__caption {
+    color: var(--input-caption-color);
+  }
+
+  @include element-variant('select', '', (
+          'label-color': $clr-grey-500,
+          'label-hover-color': $clr-grey-600,
+          'color': $clr-black,
+          'background': $clr-white,
+          'hover-background': $clr-grey-200,
+          'active-background': $clr-grey-300,
+          'chevron-color': $clr-black,
+          'clear-color': $clr-black,
+          'clear-hover-color': $clr-cyan-500,
+  ));
+}
+
+.ui-select-option {
+  $self: &;
+
+  @include txt-m-m;
+
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: $clr-white;
+  transition: background-color .2s ease-out;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+
+  &:hover,
+  &:focus {
+    background-color: $clr-grey-200;
+  }
+
+  &:active,
+  &.is-selected {
+    background-color: $clr-grey-300;
+  }
+
+  &__icon {
+    margin-right: 8px;
+  }
+
+  &__label {
+    flex: 1;
+  }
+
+  &__checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    outline: 1px solid $clr-grey-400;
+    outline-offset: -1px;
+    transition: .2s ease-out;
+    transition-property: background-color, outline-color;
+    pointer-events: none;
+    color: transparent;
+
+    #{$self}.is-selected & {
+      outline-color: transparent;
+      background-color: $clr-grey-200;
+      color: $clr-grey-600;
+    }
+  }
+}