/**
 * btns
 * Colours are defined in the colour.css file
 */

:root {
  --btn-bg-color: var(--color-blue);
  --btn-border-color: transparent;
  --btn-fg-color: var(--color-white);
  --btn-hover-fg-color: var(--color-white);
  --btn-hover-bg-color: var(--color-blue-dk);
}

.btn,
.button,
.btn-primary,
input[type="submit"],
.form-submit {
  background-color: var(--btn-bg-color);
  color: var(--btn-fg-color);

  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1rem;
  text-decoration: none;
  white-space: nowrap;

  display: inline-block;
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 100%, 0% 100%);
  padding: 0.9em 2.6em 0.9em 1.6em;
  position: relative;
  overflow: hidden;
  z-index: 1;

  transition: 0.3s all;
  white-space: nowrap;

  &:is(:hover, :focus, :focus-within) {
    color: var(--btn-hover-fg-color);
    text-decoration: none;

    /* luis: per Evan's requests - change bg on hover for primary buttons */
    background-color: var(--btn-hover-bg-color);
  }
}
.btn-reset {
  --btn-bg-color: transparent;
  --btn-hover-bg-color: transparent;
  --btn-border-color: transparent;
  clip-path: none;
}

.btn-reversed,
.btn-white {
  --btn-bg-color: var(--color-white);
  --btn-fg-color: var(--color-black);
  --btn-hover-fg-color: var(--btn-fg-color);
}

.btn-no-angle {
  clip-path: none;
}

.btn[class*="outline"] {
  --btn-border-color: var(--color-blue);
  --btn-fg-color: var(--color-blue);
  --btn-bg-color: transparent;
  --btn-hover-fg-color: var(--btn-fg-color);
  --btn-hover-bg-color: var(--btn-bg-color);

  clip-path: none;

  &::after,
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
  }

  &::before {
    border: 2px solid var(--btn-border-color);
    width: 100%;
    height: calc(100% - 4px);
    right: 0.5rem;
    transform: skew(19deg);
  }

  &::after {
    border: none;
    border-right: 2px solid var(--btn-border-color);
    width: 1rem;
    left: -1rem;
    height: 100%;
  }

  &.btn-outline--primary {
    --btn-border-color: var(--color-blue);
    --btn-fg-color: var(--color-blue);
  }

  &.btn-outline--white {
    --btn-border-color: var(--color-white);
    --btn-fg-color: var(--color-white);

    color: var(---btn-fg-color);
    clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 100%, 0% 100%);
    border: 1px solid transparent;

    &:is(:hover, :focus, :focus-within) {
      background-color: var(--color-grey-lt);
      color: var(--color-black);
    }
  }

  &.btn-outline--dark {
    --btn-border-color: var(--color-black);
    --btn-fg-color: var(--color-black);
  }
}

.btn-bigger {
  font-size: 1.25em;
}

.btn-xs {
  border-radius: 0;
  clip-path: none;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 0.9rem;
  padding: 1px 6px;
  margin: 0;
}

.btn-sm,
.btn-smaller {
  background: var(--btn-bg-color);
  color: var(--btn-fg-color);
  clip-path: none;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.5rem 1.3rem;
  text-transform: none;

  &:is(:hover, :focus) {
    background: var(--btn-hover-bg-color);
    color: var(--btn-hover-fg-color);
  }

  &::after,
  &::before {
    display: none;
  }
}

.btn.secondary {
  background: var(--color-dk-grey);
  color: var(--color-white);

  &:is(:hover, :focus) {
    background-color: var(--color-green);
  }
}

.bg-color .btn.secondary {
  background-color: var(--color-white);
  color: var(--color-green);

  &:is(:hover, :focus) {
    background-color: var(--color-dk-grey);
    color: var(--color-white);
  }
}

.btn-link {
  font-weight: normal;
  padding: 0;
}

.btn-icon {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* Reset for admin toolbar */
.admin-toolbar btn,
.toolbar-btn {
  background: inherit;
  font-weight: normal;
  text-transform: none;
  white-space: auto;

  &:is(:hover, :focus) {
    background: inherit;
  }
}

/* Arrow button */

.btn-arrow {
  font-size: 16px;
  padding: 0 25px 0 0;
  font-weight: bold;
  border: 0;
  position: relative;

  &:after {
    transition: 0.3s all;
    position: absolute;
    top: 50%;
    right: -17px;
    margin-top: -6px;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.791667 7.200107h15.793354l-6.047542-5.820729c-.316666-.304796-.328937-.81119-.027312-1.131186.301229-.319596.802354-.332396 1.119416-.0276l6.9065 6.647919C18.834938 7.170908 19 7.572503 19 8.000098c0 .427194-.165062.829189-.477771 1.144786l-6.893041 6.634319C11.476 15.926801 11.279667 16 11.083333 16c-.209 0-.418-.083199-.573562-.248397-.301625-.319996-.289354-.82599.027312-1.130786l6.072875-5.820729H.791667c-.437 0-.791667-.358396-.791667-.79999 0-.441595.354667-.799991.791667-.799991z' fill='%230064A3' fill-rule='nonzero'/%3E%3C/svg%3E");
    background-size: contain;
    transform: translateX(-3px);
  }

  &:hover {
    text-decoration: underline;

    &:after {
      transform: translateX(0);
    }
  }
}

@media (min-width: 960px) {
  .btn-arrow {
    font-size: 0.9rem;

    &::after {
      right: 0;
    }
  }
}

/* Play buttons for cards */
.btn-play {
  transition: 0.3s all;
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  display: block;
  background-color: var(--color-blue);
  text-indent: -9999em;
  font-size: 0;

  &:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12.5px 0 12.5px 11px;
    border-color: transparent transparent transparent var(--color-lt-grey);
  }

  &:hover {
    background-color: $blue;

    &:after {
      border-color: transparent transparent transparent var(--color-white);
    }
  }
}