@use '../../../styles/tools' as *;
@use '../../settings/variables' as theme-variables;
@import 'variables';

ion-select {
  --background: var(--sd-input-background-color);
  --border-radius: var(--sd-border-radius-default);
  --border-color: var(--sd-input-border-color);
  --border-color-focus: var(--sd-input-border-focused-color);
  --border-width: 1px;
  --color: var(--sd-input-color);
  --caret-color: var(--sd-input-caret-color);
  --height: var(--sd-input-height);
  --icon-color: var(--sd-input-icon-color);
  --inner-height: var(--sd-input-inner-height);
  --inner-padding-end: 0px;
  --outline-color: var(--sd-input-outline-color);
  --outline-width: 0px;
  --padding-inline: var(--sd-input-inline-padding);
  --padding-bottom: var(--sd-input-padding-bottom);
  --padding-end: var(--sd-input-padding-end);
  --padding-start: var(--sd-input-padding-start);
  --padding-top: var(--sd-input-padding-top);
  --placeholder-color: var(--sd-input-placeholder-color);
  --placeholder-opacity: var(--sd-input-placeholder-opacity);

  i[slot="end"] {
    --icon-color: var(--sd-input-icon-hint-color);
  }

  &.select-expanded {
    --border-color: var(--border-color-focus) !important;
    --outline-width: 4px;
  }

  &.ion-invalid {
    --border-color: var(--sd-input-error-border-color) !important;
    --outline-color: var(--sd-input-error-outline-color) !important;
  }
}

ion-select {
  @include shadow(xs);
  @include typography(text-md, regular);
  background-color: var(--background);
  border-color: var(--border-color);
  border-width: var(--border-width);
  border-style: solid;
  border-radius: var(--border-radius);
  color: var(--color);
  outline-width: var(--outline-width);
  outline-style: solid;
  outline-color: var(--outline-color);
  transition: all .1s ease-out !important;

  &.select-expanded {
    transition: all .1s ease-in !important;
  }

  &::part(text) {
    color: var(--color);
  }

  &::part(icon) {
    color: var(--icon-color) !important;
    transition: all 0.1s ease-out;
    content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    opacity: 1 !important;
  }
  
  &.select-expanded::part(icon) {
    transition: all 0.1s ease-out;
    transform: rotate(180deg);
  }
}


// ion-item.item-select {
//   --background: var(--sd-input-background-color);
//   --border-radius: var(--sd-border-radius-default);
//   --border-color: var(--sd-input-border-color);
//   --border-color-focus: var(--sd-input-border-focused-color);
//   --border-width: 1px;
//   --color: var(--sd-input-color);
//   --caret-color: var(--sd-input-caret-color);
//   --height: var(--sd-input-height);
//   --icon-color: var(--sd-input-icon-color);
//   --inner-height: var(--sd-input-inner-height);
//   --inner-padding-end: 0px;
//   --outline-color: var(--sd-input-outline-color);
//   --outline-width: 0px;
//   --padding-inline: var(--sd-input-inline-padding);
//   --padding-bottom: var(--sd-input-padding-bottom);
//   --padding-end: var(--sd-input-padding-end);
//   --padding-start: var(--sd-input-padding-start);
//   --padding-top: var(--sd-input-padding-top);
//   --placeholder-color: var(--sd-input-placeholder-color);
//   --placeholder-opacity: var(--sd-input-placeholder-opacity);

//   i[slot="end"] {
//     --icon-color: var(--sd-input-icon-hint-color);
//   }

//   &.select-expanded {
//     --border-color: var(--border-color-focus) !important;
//     --outline-width: 4px;
//   }
// }

// ion-item.item-select {
//   @include shadow(xs);
//   @include typography(text-md, regular);
  
//   i {
//     color: var(--icon-color);
//   }

//   i[slot="start"] {
//     font-size: 20px !important;
//     margin-right: var(--padding-inline);
//   }

//   i[slot="end"] {
//     font-size: 16px !important;
//     margin-left: var(--padding-inline);
//   }
// }

// ion-item.item-select ion-select {
//   width: 100%;
//   padding: 0;
// }

// ion-select {
//   // @include shadow(xs);
//   // @include typography(text-md, regular);
//   // background-color: var(--background);
//   // border-color: var(--border-color);
//   // border-width: var(--border-width);
//   // border-style: solid;
//   // border-radius: var(--border-radius);
//   // color: var(--color);
//   // outline-width: var(--outline-width);
//   // outline-style: solid;
//   // outline-color: var(--outline-color);
//   // transition: all .1s ease-out !important;

//   // &.select-expanded {
//   //   transition: all .1s ease-in !important;
//   // }

//   // &::part(text) {
//   //   color: var(--color);
//   // }

//   &::part(icon) {
//     color: var(--icon-color) !important;
//     transition: all 0.1s ease-out;
//     content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
//     opacity: 1 !important;
//   }
  
//   &.select-expanded::part(icon) {
//     transition: all 0.1s ease-out;
//     transform: rotate(180deg);
//   }
// }