@use '../../styles/abstracts' as *;
@use '../abstracts-theme/variables.theme' as *;

/* Theme - Atom a-btn */

.a-btn {
  // Vars
  $btn-radius-default: toRem(themed($theme-map, 'decoration', 'border-radius', 'button', 'default'));

  // Default btn settings
  border-radius: $btn-radius-default;
  @include typography-level(themed($theme-map, 'typography', 'button'));

  &--primary,
  &.a-btn--primary.-circle {
    color: themed($theme-map, 'color', 'accent', 'contrast', 600);
    background-color: themed($theme-map, 'color', 'accent', 600);

    &:hover {
      color: themed($theme-map, 'color', 'accent', 'contrast', 700);
      background-color: themed($theme-map, 'color', 'accent', 700);
    }

    &:focus,
    &:active {
      color: themed($theme-map, 'color', 'accent', 'contrast', 800);
      background-color: themed($theme-map, 'color', 'accent', 800);
    }

    &.-disabled,
    &:disabled {
      color: themed($theme-map, 'color', 'accent', 'contrast', 100);
      background-color: themed($theme-map, 'color', 'accent', 100);
    }
  }


  &--secondary,
  &.a-btn--secondary.-circle {
    border: 1px solid themed($theme-map, 'color', 'primary', 500);
    color: themed($theme-map, 'color', 'primary', 700);
    background-color: transparent;

    &:hover {
      border: 1px solid themed($theme-map, 'color', 'primary', 600);
      color: themed($theme-map, 'color', 'primary', 700);
    }

    &:focus,
    &:active {
      border: 1px solid themed($theme-map, 'color', 'primary', 800);
      color: themed($theme-map, 'color', 'primary', 800);
    }

    &.-disabled,
    &:disabled {
      border: 1px solid themed($theme-map, 'color', 'primary', 400);
      color: themed($theme-map, 'color', 'primary', 400);
    }

    &.is-active {
      background-color: themed($theme-map, 'color', 'primary', 300);
    }
  }

  &--tertiary {
    border: 2px themed($theme-map, 'color', 'primary', 400) solid;
    color: themed($theme-map, 'color', 'primary', 'contrast', 600);
    background-color: transparent;

    &:hover,
    &:active,
    &.is-active {
      border-color: themed($theme-map, 'color', 'primary', 400);
      background-color: themed($theme-map, 'color', 'primary', 400);
    }

  }

  &--ghost {
    color: themed($theme-map, 'color', 'primary', 600);
    background-color: transparent;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  &--icon-only {
    @include outlineOnFocus($border-radius: 5px);
  }

  &--real-ghost, &--real-ghost.-circle, &.a-btn--real-ghost.-circle {
    color: themed($theme-map, 'color', 'accent', 'contrast', 400);
    background-color: themed($theme-map, 'color', 'primary', 500);

    &:hover {
      background-color: themed($theme-map, 'color', 'accent', 600);
    }

    &:focus,
    &:active {
      background-color: themed($theme-map, 'color', 'accent', 700);
    }

    &.-disabled,
    &:disabled {
      background-color: themed($theme-map, 'color', 'accent', 100);
    }
  }

  &--action {
    @include outlineOnFocus($border-radius: 5px);
    border-radius: toRem(10);
    color: themed($theme-map, 'color', 'primary', 500);
    font-size: toRem(14);

    &:hover,
    &:active,
    &.is-active {
      color: themed($theme-map, 'color', 'primary', 'contrast', 400);
      background-color: themed($theme-map, 'color', 'primary', 400);
    }

    &:disabled {
      color: rgba(16, 16, 16, 0.3);
    }
  }

  // Action button displayed close to an form input field, icon + circle background (ex: add/remove)
  &--input-action {
    .a-icon {
      color: themed($theme-map, 'color', 'primary', 'contrast', 400);
    }

    &:before {
      background-color: themed($theme-map, 'color', 'primary', 400);
    }

    &:hover {
      &:before {
        background-color: themed($theme-map, 'color', 'primary', 500);
      }
    }
  }

  // Action add item, circled icon on left + text on right
  &--iconcircle-text {
    color: themed($theme-map, 'color', 'primary', 700);
    font-weight: 400;
    font-size: 14px;

    &__icon-wrapper {
      &:before {
        background-color: themed($theme-map, 'color', 'primary', 400);
      }
    }

    .a-icon {
      color: themed($theme-map, 'color', 'primary', 'contrast', 400);
    }
  }

  &--select {
    border-radius: toRem(5);
    color: themed($theme-map, 'color', 'primary', 600);
    background-color: themed($theme-map, 'color', 'primary', 'contrast', 600);
    font-weight: 400;
  }

  // Button more dots ( ...)
  &--more {
    color: themed($theme-map, 'color', 'primary', 500);

    &:hover {
      color: themed($theme-map, 'color', 'primary', 600);
      background-color: themed($theme-map, 'color', 'primary', 200);
    }
    &:active {
      background-color: themed($theme-map, 'color', 'primary', 300);
    }
    &:disabled {
      color: themed($theme-map, 'color', 'primary', 400);
      background-color: transparent;
    }
  }

  // Toggler open/close element
  &--toggle {
    background-color: themed($theme-map, 'color', 'primary', 200);
    &:before{
      border-color: themed($theme-map, 'color', 'primary', 500);
    }
    &:hover,
    &:active {
      background-color: themed($theme-map, 'color', 'primary', 300);
      &:before {
        border-color: themed($theme-map, 'color', 'primary', 600);
      }
    }
  }

  /* MODIFIERS */

  &.-circle {
    background: themed($theme-map, 'color', 'primary', 50);
  }
}