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

ion-select-popover {
  --background: var(--sd-sys-color-surface);
  // --background-checked: var(--sd-sys-color-surface-subtle);
  --background-checked-icon: var(--sd-sys-color-primary-overlay);
  --border-radius: #{theme-variables.$border-radius-default};
  --color: var(--sd-sys-color-on-surface);
  --color-checked: var(--sd-sys-color-on-surface-emphasis-variant);

  ion-radio.radio-checked {
    --color: transparent;
    --color-checked: transparent;
  }

  ion-item {
    --background-focused: var(--sd-sys-color-surface-subtle) !important;
    --background-focused-opacity: 1 !important;
    --background-hover: var(--sd-sys-color-surface-overlay) !important;
    --background-hover-opacity: 1 !important;
    --border-radius: #{theme-variables.$border-radius-inset};
    --border-color: transparent;

    &.item-radio-checked {
      --background-focused: var(--sd-sys-color-surface-subtle) !important;
      --background-hover: var(--sd-sys-color-surface-overlay) !important;
      --background: var(--sd-sys-color-surface-subtle) !important;
      --background-hover-opacity: 1 !important;
      --border-color: transparent;
      --color: var(--color-checked);
    }

    &:hover {
      --background: var(--sd-sys-color-surface-overlay);
      --color: var(--sd-sys-color-on-surface-emphasis-variant);
    }
  }
}

ion-select-popover {
  ion-radio.radio-checked  {
    opacity: 1 !important;
    background-color: var(--background-checked-icon);
    border: none !important;
    clip-path: padding-box inset(0.28125em 0);
    mask-image: 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='M16.6667 5L7.50001 14.1667L3.33334 10' stroke='currentColor' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: 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='M16.6667 5L7.50001 14.1667L3.33334 10' stroke='currentColor' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  ion-list {
    padding: 4px 6px !important;
  }

  ion-item {
    background-color: transparent !important;
    border-radius: var(--border-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-color);
    margin-top: 2px;
    margin-bottom: 2px;

    // &.item-radio-checked {
    //   --background-hover: var(--sd-sys-color-surface-subtle) !important;
    //   --background-focused: var(--sd-sys-color-surface-subtle) !important;
    //   --background: var(--sd-sys-color-surface-subtle) !important;
    // }

    // &:hover {
    //   background-color: var(--background) !important;
    // }
  }

  ion-item.ion-focused {
    // --background-focused: transparent !important;
  }

  ion-label {
    @include typography(text-md, medium);
    padding: 10px 8px !important;
  }
}