.ads-Button--product {
  @apply leading-none
    rounded-md;
}

.ads-Button--product.ads-Button--primary {
  @apply bg-brandGreen-400
    text-white
    border-brandGreen-400
    shadow-buttonPrimary;
}

.ads-Button--product.ads-Button--primary:hover,
.ads-Button--product.ads-Button--primary:active,
.ads-Button--product.ads-Button--primary:focus,
.ads-Button--product.ads-Button--primary.ads-Button--depressed {
  @apply bg-brandGreen-500
    border-brandGreen-500;
}

.ads-Button--product.ads-Button--secondary {
  @apply bg-white
    text-gray-700
    border-gray-400
    shadow-buttonSecondary;
}

.ads-Button--product.ads-Button--secondary:hover,
.ads-Button--product.ads-Button--secondary:active,
.ads-Button--product.ads-Button--secondary:focus,
.ads-Button--product.ads-Button--secondary.ads-Button--depressed {
  @apply bg-gray-200;
}

.ads-Button--product.ads-Button--utility {
  @apply bg-gray-200
    text-gray-600
    border-gray-500;
}

.ads-Button--product.ads-Button--utility:hover,
.ads-Button--product.ads-Button--utility:active,
.ads-Button--product.ads-Button--utility:focus,
.ads-Button--product.ads-Button--utility.ads-Button--depressed {
  @apply bg-gray-400;
}

.ads-Button--product.ads-Button--danger {
  @apply bg-white
    text-failure
    border-gray-400
    shadow-buttonSecondary;
}

.ads-Button--product.ads-Button--danger:hover,
.ads-Button--product.ads-Button--danger:active,
.ads-Button--product.ads-Button--danger:focus,
.ads-Button--product.ads-Button--danger.ads-Button--depressed {
  @apply bg-gray-200;
}

.ads-Button--product.ads-Button--minimal {
  @apply bg-transparent
    border-transparent
    text-gray-700;
}

.ads-Button--product.ads-Button--minimal:hover,
.ads-Button--product.ads-Button--minimal:active,
.ads-Button--product.ads-Button--minimal:focus,
.ads-Button--product.ads-Button--minimal.ads-Button--depressed {
  @apply bg-gray-300;
}

.ads-Button--product.ads-Button--minimal:hover,
.ads-Button--product.ads-Button--minimal:active,
.ads-Button--product.ads-Button--minimal:focus,
.ads-Button--product.ads-Button--minimal.ads-Button--depressed {
  @apply bg-gray-300;
}

/* Sizes */

.ads-Button--product.ads-Button--medium {
  @apply h-8
    px-3
    text-h5;
}

.ads-Button--product.ads-Button--large {
  @apply h-10
    px-5
    text-h4;
}

.ads-Button--product.ads-Button--iconOnly--medium {
  @apply h-8
    w-8
    text-h5;
}

.ads-Button--product.ads-Button--iconOnly--large {
  @apply h-10
    w-10
    text-h4;
}