.select-container {
  width: 100%;
}
.select {
  --select-background-color: var(--sds-color-background-default-default);
  --select-text-color: var(--sds-color-text-default-default);
  --select-border-color: var(--sds-color-border-default-default);
  align-items: center;
  background-color: var(--select-background-color);
  box-shadow: inset 0 0 0 var(--sds-size-stroke-border)
    var(--select-border-color);
  border-radius: var(--sds-size-radius-200);
  color: var(--select-text-color);
  display: flex;
  gap: var(--sds-size-space-200);
  padding: calc(var(--sds-size-space-300) - var(--sds-size-stroke-border) * 2)
    var(--sds-size-space-300)
    calc(var(--sds-size-space-300) - var(--sds-size-stroke-border) * 2)
    var(--sds-size-space-400);
  position: relative;
  justify-content: space-between;
  width: 100%;

  > .icon {
    --icon-color: var(--sds-color-icon-default-default);
  }

  > .select-value {
    align-items: center;
    color: var(--select-text-color);
    display: flex;
    gap: var(--sds-size-space-200);

    &[data-placeholder] {
      --select-text-color: var(--sds-color-text-default-tertiary);
    }

    .select-item-check {
      display: none;
    }
  }

  &[data-disabled] {
    --select-background-color: var(--sds-color-background-disabled-default);
    --select-text-color: var(--sds-color-text-disabled-default);
    --select-border-color: var(--sds-color-border-disabled-default);
    > .icon {
      --icon-color: var(--sds-color-icon-disabled-on-disabled);
    }
  }

  &:has(~ .error-message):not([data-disabled]),
  &[data-invalid]:not([data-disabled]) {
    --select-border-color: var(--sds-color-border-danger-default);
  }

  &[data-focus-visible] {
    --select-border-color: var(--sds-color-border-brand-secondary);
  }
}

.select-item {
  gap: var(--sds-size-space-200);
  min-width: calc(var(--sds-size-space-400) * 10);
  padding-left: var(--sds-size-space-100);

  .select-item-check {
    opacity: 0;
  }
  &[data-selected] .select-item-check {
    opacity: 1;
  }
}
