@use 'sass:color';
@use 'theme-variables' as *;

@include export-module('button-theme') {
  .sf-btn {
    color: $btn-color;
    &:active {
     box-shadow: $btn-active-box-shadow;
    }
  }
  .sf-btn-primary {
    background: $btn-primary-bg-color;
    border-color: $btn-primary-border-color;
    color: $btn-primary-text-color;
    &:hover {
      background: $btn-primary-focus-filled-bg-color;
      box-shadow: $btn-hover-focus-box-shadow;
    }

    &:focus {
      outline: $btn-focus-outline-round;
    }

    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
      background: $btn-primary-focus-filled-bg-color;
    }

    &.sf-active,
    &:active {
      background: $btn-primary-active-filled-bg-color;
      box-shadow: $btn-active-box-shadow;
    }
  }

  .sf-btn-outlined {
    background: $btn-link-bg-color;
    &:hover {
      background: $btn-outline-focus-background-color;
      border-color: $btn-outline-border-color;
      box-shadow: none;
    }

    &:focus {
      background: $btn-outline-focus-background-color;
      border: 1px solid $btn-outline-border-color;
    }

    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
      background: $btn-outline-focus-background-color;
    }

    &.sf-active,
    &:active {
      background: $btn-outline-focus-background-color;
      box-shadow: none;
    }
  }

  .sf-btn-standard {
    background: $btn-link-bg-color;
    border-color: $btn-link-bg-color;
    &:hover {
      background: $btn-flat-hover-bg-color;
      box-shadow: $btn-flat-hover-border-color;
    }

    &:focus {
      background: $btn-flat-hover-bg-color;
    }

    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
      background: $btn-flat-hover-bg-color;
    }

    &:active,
    &.sf-active {
      box-shadow: none;
      background: $btn-flat-hover-bg-color;
    }
  }

  .sf-btn-primary {
    &.sf-btn-standard,
    &.sf-btn-outlined {
      color: $btn-primary-color
    }
  }

  .sf-btn-secondary {
    background-color: $btn-bg-color;
    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
    }
    &:active,
    &.sf-active {
      background: $btn-bg-active-color;
    }
    &.sf-btn-standard {
      &:active,
      &.sf-active {
        background: $btn-flat-pressed-bg-color;
        box-shadow: none;
      }
    }
    &.sf-btn-filled {
      &:hover {
        box-shadow: $btn-hover-focus-box-shadow;
        background: $btn-bg-active-color;
      }
      &:active,
      &.sf-active {
        box-shadow: $btn-active-box-shadow;
      }
    }
  }

  .sf-btn-success {
    color: $btn-success-color;
    &:hover {
      background: $btn-success-hover-flat-bg-color;
    }

    &:focus {
      background: $btn-success-hover-flat-bg-color;
    }

    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
    }

    &:active,
    &.sf-active {
      background: $btn-success-focus-flat-bg-color;
      box-shadow: none;
    }
    
    &.sf-btn-outlined {
      border-color: $btn-success-border-color;
      &.sf-active,
      &:active {
        background: $btn-success-focus-flat-bg-color;
      }
    }

    &.sf-btn-filled {
      color: $btn-primary-text-color;
      background: $btn-success-bg-color;
      border-color: $btn-success-bg-color;
      &:hover {
        background: $btn-success-focus-filled-bg-color;
        color: $btn-success-hover-color;
        box-shadow: $btn-hover-focus-box-shadow;
      }
      &:focus {
        background: $btn-success-focus-filled-bg-color;
      }
      &.sf-active,
      &:active {
        background: $btn-success-active-filled-bg-color;
        box-shadow: $btn-active-box-shadow;
      }
    }
  }

  .sf-btn-info {
    color: $btn-info-color;
    &:hover {
      background: $btn-info-hover-flat-bg-color;
    }

    &:focus {
      background: $btn-info-hover-flat-bg-color;
    }

    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
    }

    &:active,
    &.sf-active {
      background: $btn-info-focus-flat-bg-color;
      box-shadow: none;
    }

    &.sf-btn-outlined {
      border-color: $btn-info-border-color;
      &.sf-active,
      &:active {
        background: $btn-info-focus-flat-bg-color;
      }
    }

    &.sf-btn-filled {
      color: $btn-primary-text-color;
      background: $btn-info-bg-color;
      border-color: $btn-info-bg-color;
      &:hover {
        background: $btn-info-focus-filled-bg-color;
        color: $btn-info-hover-color;
        box-shadow: $btn-hover-focus-box-shadow;
      }
      &:focus {
        background: $btn-info-focus-filled-bg-color;
      }
      &.sf-active,
      &:active {
        background: $btn-info-active-filled-bg-color;
        box-shadow: $btn-active-box-shadow;
      }
    }
  }

  .sf-btn-warning {
    color: $btn-warning-color;
    &:hover {
      background: $btn-warning-hover-flat-bg-color;
    }

    &:focus {
      box-shadow: none;
      background: $btn-warning-hover-flat-bg-color;
    }

    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
    }

    &.sf-active,
    &:active {
      background: $btn-warning-focus-flat-bg-color;
      box-shadow: none;
    }

    &.sf-btn-outlined {
      border-color: $btn-warning-border-color;
      &.sf-active,
      &:active {
        background: $btn-warning-focus-flat-bg-color;
      }
    }

    &.sf-btn-filled {
      color: $btn-primary-text-color;
      background: $btn-warning-bg-color;
      border-color: $btn-warning-bg-color;
      &:hover {
        background: $btn-warning-focus-filled-bg-color;
        color: $btn-warning-hover-color;
        box-shadow: $btn-hover-focus-box-shadow;
      }
      &:focus {
        background: $btn-warning-focus-filled-bg-color;
      }
      &.sf-active,
      &:active {
        background: $btn-warning-active-filled-bg-color;
        box-shadow: $btn-active-box-shadow;
      }
    }
  }

  .sf-btn-error {
    color: $btn-danger-color;
    &:hover {
        background: $btn-error-hover-flat-bg-color;
    }

    &:focus {
      background: $btn-error-hover-flat-bg-color;
    }

    &:focus-visible {
      box-shadow: $btn-keyboard-focus-box-shadow;
    }

    &:active,
    &.sf-active {
      background: $btn-error-focus-flat-bg-color;
      box-shadow: none;
    }

    &.sf-btn-outlined {
      border-color: $btn-danger-border-color;
      &.sf-active,
      &:active {
        background: $btn-error-focus-flat-bg-color;
      }
    }

    &.sf-btn-filled {
      color: $btn-primary-text-color;
      background: $btn-danger-bg-color;
      border-color: $btn-danger-bg-color;
      &:hover {
        background: $btn-error-focus-filled-bg-color;
        color: $btn-danger-hover-color;
        box-shadow: $btn-hover-focus-box-shadow;
      }
      &:focus {
        background: $btn-error-focus-filled-bg-color;
      }
      &.sf-active,
      &:active {
        background: $btn-error-active-filled-bg-color;
        box-shadow: $btn-active-box-shadow;
      }
    }
  }

  .sf-btn:disabled {
    background: $btn-link-bg-color;
    border-color: $btn-disabled-border-color;
    color: $btn-disabled-color;
    pointer-events: none;
    box-shadow: none;
  }

  .sf-btn-link:hover {
    text-decoration: underline;
  }

}