@use 'sass:map';
@use '../../../styles/tools' as *;
@use '../../settings/variables' as theme-variables;
@use '../../../icons' as icons;
@import 'variables';

ion-action-sheet {
  --button-background: var(--sd-sys-color-surface-subtle) !important;
  --color: var(--sd-sys-color-on-surface-emphasis-variant) !important;
  // --button-background-activated: ;
  // --button-background-activated-opacity: ;
  // --button-background-focused: ;
  // --button-background-focused-opacity: ;
  // --button-background-hover: ;
  // --button-background-hover-opacity: ;
  --button-background-selected: green !important;
  // --button-background-selected-opacity: ;
  --button-color: var(--sd-sys-color-on-surface-emphasis-variant) !important;
  // --button-color-activated: ;
  // --button-color-focused: ;
  // --button-color-hover: ;
  // --button-color-selected: ;
  // --color: ;
  // --height: ;
  // --max-height: ;
  // --max-width: ;
  // --min-height: ;
  // --min-width: ;
  // --width: ;
  --border-color: var(--sd-sys-color-surface-border);
  --border-width: 1px;
}

ion-action-sheet {
  .action-sheet-group {
    border-radius: #{theme-variables.$border-radius-inset} #{theme-variables.$border-radius-inset} 0 0;
    background-color: var(--sd-sys-color-surface-subtle) !important;
    // border-color: var(--border-color);
    // border-style: solid;
    // border-width: var(--border-width);
  }
  .action-sheet-title {
    min-height: 20px !important;
  }
  .action-sheet-button {
    @include typography(text-md, medium);
    display: flex !important;
    flex-direction: row !important;
  }
}