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

ion-button {
  --background: #{$button-base-background};
  --border-color: #{$button-base-border-color};
  --border-radius: #{theme-variables.$border-radius-default} !important;
  --box-shadow: none !important;
  --color: #{$button-base-color};
  --outline-color: #{$button-base-outline-color};
  --ripple-color: transparent;
  letter-spacing: 0;
  text-transform: unset;
  margin: 0;
  transition: all .1s ease-out !important;

  &.button-sm.button--icon {
    width: 32px;
    height: 32px;
  }

  &::part(native) {
    outline-width: 0px;
    outline-style: solid;
    outline-color: var(--outline-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-color);
    background-color: var(--background);
    transition: all .1s ease-out !important;
    font-weight: 600;
  }

  &:hover {
    --color: #{$button-base-color-hover};
    --background: #{$button-base-background-hover};
    transition: all .1s ease-out !important;
  }

  &:active {
    --color: #{$button-base-color-focus};
    --background: #{$button-base-background-focus};
    transition: all .1s ease-out !important;
    &::part(native) {
      transition-delay: .3s !important;
      transition-property: outline-with;
      outline-width: 4px;
    }
  }


  ion-icon {
    font-size: 18px;
  }

  @each $color in theme-variables.$ionic-colors {
    &.ion-color-#{$color} {
      &::part(native) {
        background-color: var(--ion-color-#{$color}) !important;
      }
      &:active {
        outline-color: var(--ion-color-#{$color}-outline) !important;
      }
    }
  }

  @each $button, $size in $button-sizes {
    &.button-#{$button} {
      --padding-top: #{map.get($button-sizes, #{$button}, padding-top)};
      --padding-bottom: #{map.get($button-sizes, #{$button}, padding-bottom)};
      --padding-start: #{map.get($button-sizes, #{$button}, padding-start)};
      --padding-end: #{map.get($button-sizes, #{$button}, padding-end)};
      height: #{map.get($button-sizes, #{$button}, height)};
      font-size: #{map.get($button-sizes, #{$button}, font-size)};
      line-height: #{map.get($button-sizes, #{$button}, line-height)};
      ion-icon {
        font-size: #{map.get($button-sizes, #{$button}, icon-size)};
      }
    }
  }
}

ion-button[fill="outline"],
ion-button[fill="clear"] {
  &:active {
  outline-color: transparent !important;
}
}

ion-button[variant="secondary"] {
  @include shadow(xs);
  --background: #{$button-outline-background};
  --border-color: #{$button-outline-border-color};
  --color: #{$button-outline-label-color};
  --outline-color: #{$button-outline-outline-color};
  border-radius: #{theme-variables.$border-radius-default} !important;
  letter-spacing: 0;
  text-transform: unset;
  margin: 0;

  &:hover {
    --color: #{$button-outline-color-hover};
  }

  &:active {
    --background: transparent;
    --color: #{$button-outline-color-focus};
  }
}