.funkwhale {
  &.button {
    background-color: var(--fw-bg-color);
    color: var(--fw-text-color);
    border: 1px solid var(--fw-bg-color);

    @include light-theme {
      &.is-secondary.is-outline {
        --fw-bg-color: var(--fw-gray-600);
        --fw-text-color: var(--fw-gray-700);

        &[disabled] {
          --fw-bg-color: var(--fw-gray-600) !important;
          --fw-text-color: var(--fw-gray-600) !important;
        }

        &.is-hovered,
        &:hover {
          --fw-bg-color: var(--fw-gray-700) !important;
          --fw-text-color: var(--fw-gray-800) !important;
        }

        &.is-active,
        &:active {
          --fw-text-color: var(--fw-red-010) !important;
          border: 1px solid var(--fw-gray-600) !important;
        }
      }

      &.is-outline {
        &:not(:active):not(.is-active) {
          background-color: transparent !important;
          --fw-text-color:--fw-gray-400;
        }
      }

      &.is-ghost {
        &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
          background-color: transparent !important;
          border-color: transparent !important;
          --fw-text-color:--fw-gray-400;
        }
      }
    }

    @include dark-theme {
      &.is-secondary.is-outline {
        --fw-bg-color: var(--fw-gray-500);
        --fw-text-color: var(--fw-gray-400);

        &[disabled] {
          --fw-bg-color: var(--fw-gray-600) !important;
          --fw-text-color: var(--fw-gray-700) !important;
        }

        &.is-hovered,
        &:hover {
          --fw-bg-color: var(--fw-gray-600) !important;
          --fw-text-color: var(--fw-gray-500) !important;
        }

        &.is-active,
        &:active {
          --fw-text-color: var(--fw-red-010) !important;
          --fw-bg-color: var(--fw-gray-700) !important;
          border: 1px solid var(--fw-gray-600) !important;
        }
      }

      &.is-outline {
        &:not(:active):not(.is-active) {
          background-color: transparent !important;
        }
      }

      &.is-ghost {
        &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
          background-color: transparent !important;
          border-color: transparent !important;
        }
      }
    }

    @if $docs {
      color: var(--fw-text-color) !important;
    }

    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;

    font-family: $font-main;
    font-weight: 900;
    font-size: 0.875em;

    line-height: 1em;

    padding: 0.642857142857em;

    border-radius: var(--fw-border-radius);
    margin: 0 0.5ch;

    transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
    transition: all .2s ease;


    &.is-aligned-center {
      justify-content: center;
    }

    &.is-aligned-left {
      justify-content: flex-start;
    }

    &.is-aligned-right {
      justify-content: flex-end;
    }

    &.is-shadow {
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    }

    &:not(.icon-only):not(.is-auto) {
      min-width: 8.5rem;
    }

    &.is-full {
      display: block;
    }

    &.is-round {
      border-radius: 100vh;
    }

    &[disabled] {
      font-weight: normal;
      pointer-events: none;
    }

    &.is-loading {
      @extend .is-active;

      > span {
        opacity: 0;
      }
    }

    i.bi {
      font-size: 1.2rem;
    }

    i.bi + span:not(:empty) {
      margin-left: 1ch;
    }
  }
}