/*==========================
Buttons
============================*/

/* Block shaped button with arrow animation */
/* Requires .btn class */
.btn--arrow-block {
  position: relative;
  overflow: hidden;
  background-color: transparent !important; /* We need to next components differently to avoid important rules */
  z-index: 0;
  transition: all .2s ease-in-out;
}
/* Must have child element with class */
.btn--arrow-block .arrow-block {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  transform: translate(-100%, -50%);
  transition: all .2s ease-in-out;
}
.btn--arrow-block .arrow-block-white {
  @apply bg-white;
}
.btn--arrow-block .arrow-block-dark {
  @apply bg-black;
}
.btn--arrow-block .arrow-block-blue {
  @apply bg-accent-blue;
}
.btn--arrow-block .arrow-block::after {
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 22px solid transparent;
  transform: translateY(-50%);
}
.btn--arrow-block .arrow-block-white::after {
  @apply border-l-white;
}
.btn--arrow-block .arrow-block-dark::after {
  @apply border-l-black;
}
.btn--arrow-block .arrow-block-blue::after {
  @apply border-l-accent-blue;
}
.btn--arrow-block::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
  opacity: 1;
  transition: all .2s ease-in-out;
}

/* Arrow hover animation */
.btn--arrow-block:hover::after {
  width: 0;
  opacity: 0;
  transition: all .1s linear;
}

.btn--arrow-block:hover .arrow-block {
  transform: translate(-0%, -50%);
}

/* Support for multiple bg colors */
.btn--arrow-block-blue {
  @apply text-white text-opacity-100;
}
.btn--arrow-block-blue:after {
  @apply bg-accent-blue;
}
.btn--arrow-block-blue:hover {
  @apply text-accent-blue text-opacity-0;
}

.btn--arrow-block-white {
  @apply text-black text-opacity-100;
  color: #000 !important;/* We need to nest components differently to avoid important rules */
}

.btn--arrow-block-white:after {
  @apply bg-white;
}

.btn--arrow-block-white:hover {
  @apply text-white text-opacity-0;
}

.btn--arrow-block-dark {
  @apply text-white text-opacity-100;
  color: #fff !important;
  /* We need to nest components differently to avoid important rules */
}

.btn--arrow-block-dark:after {
  @apply bg-black;
}

.btn--arrow-block-dark:hover {
  @apply text-white text-opacity-0;
}

.btn-underlined-link {
  display: inline-block;
  position: relative;
}
.btn-underlined-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: all .2s ease-in-out;
}
.btn-underlined-link:hover::after {
  width: 0;
  transition: all .1s linear;
}