.callout {
  @apply flex justify-between items-center m-auto;
}

.callout--with-click {
  @apply cursor-pointer;
}

.callout--boxed {
  @apply bg-grey-light rounded px-3 py-4;
  max-width: 350px;
}

.callout--faded {
  @apply bg-black-pure--opacity-50 rounded-full p-2;
  width: max-content;
  /**
   * TODO: Not sure about this max-width...
   */
  max-width: 100vw;
}

.callout--faded:not(.callout--with-button),
.callout--faded.callout--with-icon:not(.callout--with-button),
.callout--faded.callout--with-button:not(.callout--with-icon) {
  @apply px-3;
}

.callout--boxed .callout__text {
  @apply leading-tight;
}

.callout--faded .callout__text {
  @apply text-white text-xs font-semibold tracking-wide;
}

.callout--boxed .callout__text {
  @apply text-grey-dark;
  max-width: 50%;
}

.callout--faded.callout--with-button .callout__text {
  @apply mr-4;
}

.callout--faded .callout__subtext {
  @apply text-xs font-light tracking-normal;
  display: inherit;
}

.callout__btn {}

.callout .btn {
  @apply px-3;
  min-width: auto;
}

.callout--faded .btn {
  @apply font-semibold;
}

.callout--faded .callout__icon {
  @apply text-white;
}

.callout--faded:not(.callout--with-icon-right) .callout__icon {
  @apply mr-4;
}

.callout--faded svg {
  height: 24px;
  width: 24px;
  fill: currentColor;
}

.callout__loading .loading__spinner {
  height: 30px;
  width: 30px;
  border-color: white;
  border-right-color: transparent;
  border-width: 2px;
}