kodadot/nft-gallery

@import '@oruga-ui/oruga-next/src/scss/oruga-full.scss';
@import '../../scss/tailwind.scss';
@import '../../scss/animation.scss';

.o-btn {
  &.is-neo {
    @apply h-10 min-w-10 rounded-none font-inherit py-2;

    &.o-btn--large {
      @apply text-base h-13;
    }

    &.o-btn--small {
      @apply h-6;
    }

    @apply shadow-primary border border-border-color text-text-color bg-background-color;

    &:hover {
      @apply bg-k-accent-hover text-text-color;
    }

    &:not(.pressing):active,
    &:not(.pressing).active {
      @apply bg-background-color-inverse text-text-color-inverse border-border-color;
    }
  }

  &.o-btn {
    &--text {
      @apply p-0 h-fit text-text-color bg-inherit border-none shadow-none;

      &:hover {
        @apply text-link-hover bg-inherit;
      }
    }

    &--primary {
      @apply bg-k-primary;

      &:not(:hover):not(:disabled):not(.active):not(:active) {
        @apply text-black #{!important};
      }

      &:enabled {
        @apply border-border-color #{!important};
      }

      &:not(.active):hover {
        @apply bg-background-color text-text-color;
      }

      &.o-btn--disabled {
        @apply opacity-unset bg-k-shade border-k-grey text-k-grey;
      }

      &.shiny:not(:hover):not(:disabled) {
        @include shineEffect(var(--k-accent-light-3), lightgrey, false);
      }
    }

    &--secondary {
      @apply bg-background-color text-text-color border border-text-color;
    }

    &--k-blue {
      @apply bg-k-blue text-black;

      &:hover {
        @apply bg-background-color text-text-color;
      }

      &.o-btn--disabled {
        @apply opacity-unset bg-k-shade text-k-grey border-k-grey;
      }
    }

    &--disabled-secondary {
      &.o-btn--disabled {
        @apply opacity-unset text-k-grey border-k-grey;
      }
    }

    &--icon {
      @apply border-none p-0 h-min shadow-none;

      &:hover {
        @apply bg-transparent text-link-hover;
      }

      &.o-btn--disabled {
        @apply opacity-unset text-k-grey;
      }
    }

    &--border-icon {
      @apply flex justify-center items-center p-2.5 border border-border-color bg-background-color;

      &:hover {
        @apply bg-k-accent-hover;
      }

      & .o-btn__wrapper .o-btn__label {
        @apply text-text-color m-0 w-fit h-fit;
      }

      &.o-btn--disabled {
        @apply opacity-unset border border-k-grey;

        & .o-btn__wrapper .o-btn__label {
          @apply text-k-grey;
        }
      }
    }

    &--outlined-rounded {
      @apply w-min py-2 px-4 rounded-[3rem] shadow-none border border-card-border-color-light bg-background-color;

      &:not(.active):hover {
        @apply bg-background-color border border-text-color text-text-color;
      }

      &.o-btn--disabled {
        @apply opacity-unset border border-k-grey;

        & .o-btn__wrapper .o-btn__label {
          @apply text-k-grey;
        }
      }
    }
    &--primary-rounded {
      @apply h-[40px] w-min rounded-3xl shadow-none border border-border-color bg-k-primary text-black;

      &:not(.active):hover {
        @apply bg-background-color border border-text-color text-text-color;
      }

      &.o-btn--disabled {
        @apply opacity-unset border border-k-grey bg-neutral-5;

        & .o-btn__wrapper .o-btn__label {
          @apply text-k-grey;
        }
      }
    }

    &--connect-dropdown {
      @apply w-[120px] h-10 bg-background-color;

      &:hover {
        @apply bg-k-accent-hover text-black border border-border-color;
      }
    }

    &--k-pink {
      @apply border border-border-color;

      &:hover {
        @apply bg-k-accent-hover;
      }
    }

    &--rounded {
      @apply rounded-full py-1 px-3 border-k-shade text-border-color;

      &:hover {
        @apply border-border-color text-border-color;
      }

      &.active {
        @apply border-border-color bg-background-color-inverse text-text-color-inverse;
      }
    }

    &--pill {
      @apply rounded-[3rem] shadow-none py-2 px-4 bg-background-color text-text-color border border-k-shade;

      &:hover {
        @apply border border-k-shade;
      }

      &__active,
      &.active {
        @apply bg-background-color-inverse text-text-color-inverse border border-background-color-inverse;
      }

      .o-btn__wrapper {
        @apply flex justify-between items-center;
      }
      .o-btn__label {
        @apply flex justify-center items-center;
      }
    }

    &--secondary-rounded {
      @apply rounded-[2rem] shadow-none py-2 px-4 bg-background-color text-text-color border border-text-color;

      &:hover {
        @apply bg-k-accent-hover;
      }

      &__active,
      &.active {
        @apply border-2;
      }
    }
  }

  &.is-text {
    @apply border-none w-min text-k-grey underline-offset-4;

    &:focus {
      @apply outline-0 text-k-grey bg-transparent;
    }

    &:hover {
      @apply text-text-color bg-transparent;
    }
  }

  &.no-shadow {
    @apply shadow-none;
  }

  &.loading-with-label.o-btn--loading {
    @apply text-k-grey #{!important};

    .o-btn__label {
      @apply mr-3 #{!important};
    }

    .o-btn__wrapper {
      @apply w-auto #{!important};
    }

    &::after {
      @apply relative left-0 top-0 border-2 border-k-grey rounded-full border-r-transparent border-t-transparent #{!important};
    }
  }

  &.is-fixed-width {
    @apply w-40;
  }
}