button.wco-btn,
a.wco-btn,
button.btn,
a.btn {
  font-size: var(--btn-size, 16px);
  gap: var(--btn-gap, 8px);
  border-radius: var(--btn-radius, 8px);
  min-height: var(--btn-min-h, 48px);
  padding: var(--btn-padding, 8px 16px);
  // border: 2px solid var(--btn-border-color, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  width: fit-content;
  letter-spacing: 0.4px;
  transition: all 300ms ease-in-out, outline 0ms linear;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--wco-font-family);
  // &:focus-within:not(:active),
  &:focus-visible {
    outline: 2px solid var(--btn-focus, var(--textBtn));
  }

  &:not([class*=" bg-"]) {
    background-color: var(--bgBtn);
    color: var(--textBtn);
  }

  &:disabled:not(.btn-loading) {
    text-decoration: none;
    --bgBtn: var(--wco-color-neutral-300);
    --textBtn: var(--wco-color-neutral-900);
    pointer-events: none;
    opacity: 0.4;
  }

  &:not(:disabled),
  &:not(.btn-loading) {
    &:hover {
      transform: scale(1);
      box-shadow: var(--wco-shadow-level-1);
    }

    &:active {
      transform: scale(0.99) translateY(0.5px);
      box-shadow: var(--wco-shadow-level-0);
    }
  }

  &:not([class*=" btn-loading"]) {
    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 0px;
      width: 100%;
      background-color: black;
      filter: contrast(100px);
      opacity: 0.1;
      transition: all 300ms ease;
    }
  }

  &.btn-primary {
    --bgBtn: var(--wco-color-primary-600);
    --textBtn: var(--wco-color-primary-text);
    --btn-focus: var(--wco-color-primary-900);

    &:hover:not(.btn-outline) {
      --bgBtn: var(--wco-color-primary-700);
      --textBtn: var(--wco-color-primary-50);
    }

    &:active:not(.btn-outline) {
      --bgBtn: var(--wco-color-primary-700);
      --textBtn: var(--wco-color-primary-50);
    }

    &.btn-outline {
      background-color: transparent;
      --textBtn: var(--wco-color-primary-600);
      --btn-focus: var(--wco-color-primary-600);

      &:hover {
        background-color: var(--wco-color-primary-50);
        --textBtn: var(--wco-color-primary-700);
        --bgBtn: var(--wco-color-primary-700);
      }

      &:active {
        background-color: var(--wco-color-primary-50);
      }
    }

    &.btn-basic {
      box-shadow: none;
      --bgBtn: transparent;
      --textBtn: var(--wco-color-primary-600);

      &:hover {
        --textBtn: var(--wco-color-primary-700);
        --bgBtn: var(--wco-color-primary-50);
      }

      &:focus-visible,
      // &:focus-within,
      &:active {
        --textBtn: var(--wco-color-primary-900);
        --bgBtn: var(--wco-color-primary-100);
      }
    }
  }

  &.btn-secondary {
    --bgBtn: var(--wco-color-secondary-100);
    --textBtn: var(--wco-color-secondary-900);
    --btn-focus: var(--wco-color-secondary-900);

    &:hover:not(.btn-outline) {
      --bgBtn: var(--wco-color-secondary-50);
      --textBtn: var(--wco-color-secondary-900);
      box-shadow: none;
    }

    &:active:not(.btn-outline) {
      --bgBtn: var(--wco-color-secondary-50);
      --textBtn: var(--wco-color-secondary-900);
    }

    &.btn-outline {
      background-color: transparent;
      --textBtn: var(--wco-color-secondary-600);
      --btn-focus: var(--wco-color-secondary-600);

      &:hover {
        background-color: var(--wco-color-secondary-50);
      }

      &:active {
        background-color: var(--wco-color-secondary-100);
      }
    }

    &.btn-basic {
      box-shadow: none;
      --bgBtn: transparent;
      --textBtn: var(--wco-color-secondary-600);

      &:hover {
        --textBtn: var(--wco-color-secondary-700);
        --bgBtn: var(--wco-color-secondary-50);
      }

      &:focus-visible,
      // &:focus-within,
      &:active {
        --textBtn: var(--wco-color-secondary-900);
        --bgBtn: var(--wco-color-secondary-100);
      }
    }
  }

  &.btn-link {
    background-color: transparent;
    --textBtn: var(--wco-color-primary-600);
    text-decoration: underline;

    &:hover:not(.btn-outline) {
      --textBtn: var(--wco-color-primary-700);
      box-shadow: none;
    }

    &:active:not(.btn-outline) {
      background-color: var(--wco-color-primary-100);
      --bgBtn: var(--wco-color-primary-900);
      --textBtn: var(--wco-color-primary-900);
      box-shadow: none;
    }

    &.btn-outline {
      border: 0px solid transparent;
    }
  }

  //// tamanhos
  &.btn-full {
    width: 100%;
    min-width: max-content;
  }

  &.btn-md {
    --btn-min-h: 40px;
  }

  &.btn-sm {
    --btn-min-h: 32px;
    --btn-size: 14px;
    --btn-padding: 4px 16px;
  }

  /// Outline
  &.btn-outline {
    border: 2px solid var(--bgBtn);

    &:disabled {
      background-color: transparent;
      --textBtn: var(--wco-color-neutral-700);
      --bgBtn: var(--wco-color-neutral-700);
    }
  }

  /// Basico
  // &.btn-basic:not(:hover, :active) {
  //   --textBtn: var(--bgBtn);
  //   background-color: transparent;
  // }

  &.btn-loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    cursor: none;

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
    }

    &:before {
      content: "";
      background-color: rgba(33, 29, 29, 0.15);
      animation: loadingButton 2s ease infinite;
      z-index: 22;

      @keyframes loadingButton {
        to {
          width: 100%;
        }
      }
    }
  }

  &.btn-icon {
    --btn-padding: 4px;
    min-height: var(--btn-min-h, 48px);
    min-width: var(--btn-min-h, 48px);
  }

  /// /////////////
  /// Notificações
  /// /////////////
  &.btn.btn-notification {
    --btn-notification-size: var(--wco-spacing-xxs);
    --btn-notification-time: 2s;
    --btn-notification-count: infinite;
    --btn-notification-color: var(--bgBtn);

    &:not(.btn-outline) {
      &:before {
        outline: 2px solid var(--textBtn);
      }
    }

    &:before {
      content: "";
      position: absolute;
      top: calc(var(--btn-notification-size) / -2);
      right: calc(var(--btn-notification-size) / -2);
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background-color: var(--btn-notification-color);
      filter: saturate(0.8);
      opacity: 1;
      transition: all 300ms ease;
      animation: btnNotificationAnimation var(--btn-notification-time, 300ms) ease var(--btn-notification-count) alternate;
      box-shadow: var(--wco-shadow-level-1);
    }

    @keyframes btnNotificationAnimation {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
        box-shadow: var(--wco-shadow-level-2);
      }

      100% {
        transform: scale(1);
      }
    }
  }
}