@sinchsmb/ui-kit/src/form/SelectField/components/SelectFieldTrigger/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { Icon } from '../../../../components/Icon/Icon';
import { Scrollable } from '../../../../components/Scrollable/Scrollable';
import { Skeleton } from '../../../../components/Skeleton/Skeleton';
import { TriggerButton } from '../../../../components/TriggerButton/TriggerButton';
import { color, other, radius, shadow } from '../../../../theme';

export const StyledTriggerContainer = styled.div`
  position: relative;
`;

export const StyledDropdownRightContentContainer = styled.div<{ $clearVisible: boolean }>`
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 0;
  width: ${(props) => (props.$clearVisible ? '56px' : '28px')};
`;

export const TunedDropdownIcon = styled(Icon)`
  color: ${color('ref/palette/gray/400')};
  height: 20px;
  transform: rotate(0deg);
  transition: transform 0.3s ${other('sys/timing-function/smooth')};
  width: 20px;
`;

export const TunedTriggerButton = styled(TriggerButton)`
  appearance: none;
  background-color: ${color('sys/color/input/background/default')};
  border: 1px solid ${color('sys/color/input/border/default')};
  border-radius: ${radius('sys/radius/form-item')};
  color: ${color('sys/color/text/primary')};
  cursor: pointer;
  display: flex;
  font-size: 14px;
  outline: none;
  padding: 0;
  width: 100%;

  &[aria-invalid='true'] {
    border-color: ${color('sys/color/input/border/invalid')};
  }

  &[aria-expanded='true'] ${TunedDropdownIcon} {
    transform: rotate(180deg);
  }

  &:disabled {
    background-color: ${color('ref/palette/gray/50')};
    color: ${color('sys/color/text/disabled')};
    cursor: not-allowed;
  }

  &::placeholder {
    color: ${color('sys/color/text/disabled')};
  }

  &:hover:not(&:disabled) {
    border: 1px solid ${color('sys/color/input/border/focus')};
  }

  &:focus-visible:not(&:disabled) {
    border: 1px solid ${color('sys/color/input/border/focus')};
    box-shadow: ${shadow('sys/shadow/focus')};
  }
`;

export const TunedScrollable = styled(Scrollable)<{ $clearVisible: boolean; $disabled?: boolean }>`
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  max-height: 158px;
  min-height: 34px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: ${(props) =>
    props.$disabled ? '8px' : props.$clearVisible ? 'calc(28px + 28px + 8px)' : 'calc(28px + 8px)'};
  padding-top: 5px;
  width: 100%;
`;

export const StyledPlaceholder = styled.span`
  color: ${color('sys/color/text/disabled')};
`;

const skeletonWidth = {
  0: 160,
  1: 140,
  2: 175,
  3: 190,
  4: 155,
};

const skeletonWidthCount = Object.keys(skeletonWidth).length;

export const StyledSkeletonContainer = styled.div<{ $index?: number }>`
  align-items: center;
  display: flex;
  height: 24px;
  max-width: 60%;
  width: ${({ $index = 0 }) => (skeletonWidth as any)[$index % skeletonWidthCount]}px;
`;

export const TunedSkeleton = styled(Skeleton)`
  width: 100%;
`;

export const StyledMultipleItemsList = styled.ul`
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  max-width: 100%;
  padding: 0;
`;

export const StyledClearButton = styled.div`
  align-items: center;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  height: 28px;
  justify-content: center;
  min-width: 28px;
  width: 28px;
`;

export const TunedRemoveAllIcon = styled(Icon)`
  color: ${color('ref/palette/gray/400')};
  height: 18px;
  width: 18px;

  &:hover:not(:disabled) {
    color: ${color('sys/color/text/primary')};
  }
`;