.button {
  @apply
    outline-none
    flex
    font-medium
    py-3
    cursor-pointer
    px-4
    min-w-32
    justify-center
    items-center;

  &.small {
    @apply
      py-[2px]
      text-xxs
      min-w-26;
  }

  &.disabled {
    @apply
      pointer-events-none
      cursor-not-allowed
      opacity-50;
  }

  &.finished {
    @apply
      pointer-events-none
      cursor-not-allowed
      h-0
      py-0
      opacity-0;
  }

  &.arrow {
    @apply
      py-0
      px-0
      min-w-[unset]
      transition-all
      duration-300
      bg-transparent
      text-primary-500
      leading-[13.2px]

      hover:text-primary-250;

    &.light {
      @apply
        font-light
        border-none;
    }

    * {
      @apply
        transition-all
        duration-300;
    }

    &:hover {
      * {
        @apply
          text-primary-250;
      }

      svg {
        @apply
          left-1;

        path {
          @apply
            stroke-primary-250;
        }
      }
    }

    svg {
      @apply
        ml-2.5
        top-0
        relative
        left-0
        h-2.5
        w-auto;

      path {
        @apply
          transition-all;
      }
    }
  }

  &.outlined,
  &.filled,
  &.light {
    @apply
      text-center
      rounded-md
      leading-none
      border
      font-medium
      transition-all
      duration-300;

    * {
      @apply
        leading-none
        font-medium;
    }
  }

  &.soft {
    @apply
      border-primary-50
      bg-primary-50
      text-primary-500

      hover:opacity-50;
  }

  &.outlined {
    @apply
      border-primary-500
      border
      text-primary-500
      bg-transparent

      hover:bg-primary-500
      hover:text-white;

    &.current {
      @apply
        bg-primary-500
        text-white;
    }

    * {
      @apply
        text-primary-500;
    }

    &:hover {
      * {
        @apply
          text-white;
      }
    }
  }

  &.filled {
    @apply
      border-primary-500
      bg-primary-500
      text-white

      hover:bg-primary-250
      hover:border-primary-250;

    * {
      @apply
        text-white;
    }
  }

  &.filter {
    @apply
      p-4
      min-w-[unset]
      rounded-full
      transition-all
      duration-300
      shadow-md;

    svg {
      line,
      circle {
        @apply
          transition-all;
      }
    }

    &:hover {
      svg {
        line,
        circle {
          @apply
            stroke-primary-250;
        }
      }
    }
  }
}
