@use "sae-lib/src/styles/shadows.scss";
@use "sae-lib/src/styles/states.scss";
@use "sae-lib/src/styles/variables.scss";
@use "sass:color";


:host {
  display: inline-block;

  button {
    background: shadows.$primary-color;
    color: shadows.$neutral-white;
    border-radius: shadows.$radius-main;
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 0;
    width: 100%;
    margin-top: 8px;

    i {
      margin-right: 1rem;
    }

    &:hover, &:active, &:focus {
      background: shadows.$main-bg-color-active;
      color: shadows.$main-color-active;
      transition: all 0.25s ease;
    }


    // state colors
    &.is-primary {
      background-color: variables.$primary-color;
      color: variables.$neutral-white;
      border-color: color.adjust(variables.$primary-color, $lightness: - 10%);
    }

    &.is-secondary {
      background-color: variables.$secondary-color;
      color: variables.$neutral-white;
    }

    &.is-warning {
      background: variables.$neutral-white;
      color: variables.$warning-color-text;
      border: 0;

    }

    &.is-info {
      background: variables.$info-color;
      color: variables.$neutral-white;
      border-color: color.adjust(variables.$info-color, $lightness: -50%);
    }

    &.is-success {
      background: variables.$success-color;
      color: variables.$neutral-white;
      border-color: color.adjust(variables.$success-color, $lightness: -50%);
    }

    &.is-error {
      background: rgba(variables.$danger-color, 10%);
      color: variables.$danger-color;
      border: 0;
    }

  }
}
