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

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

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

      hover:text-primary-250;

    * {
      @apply
        transition-all;
    }

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

      svg {
        @apply
          left-1;

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

    svg {
      @apply
        ml-2.5
        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;

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

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

      hover:bg-primary-500
      hover: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;
    }
  }

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

      hover:text-primary-250;
  }

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

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

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