/**
 * Button styles
 * Includes links
 */

/* ===============================================
 * Normal buttons
 * ===============================================
 */

.btn {
  font-family: "Lato";
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--black);
  padding: 0.25rem 0.9rem 0.25rem 0.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid var(--black);
  border-radius: 2rem;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-text {
  font-family: "Lato";
  font-size: 1rem;
  font-weight: 600;
}

.btn-sm {
  font-size: 1rem;
  padding: 0.25rem 0.9rem 0.25rem 0.25rem;
  gap: 0.75rem;
}

.btn-glow {
  box-shadow: 0 0 8px var(--frost);
}

.btn-twilight {
  border: 1px solid var(--twilight);
  color: var(--white);
  background-color: var(--twilight);
}

.btn-teal-twilight-inverse,
.btn-twilight-inverse {
  border: transparent;
  color: var(--twilight);
  background-color: var(--white);
}

.btn-teal {
  border: 1px solid var(--teal);
  color: var(--white);
  background-color: var(--teal);
}

.btn-teal-twilight {
  border: transparent;
  color: var(--white);
  background-color: var(--twilight);
  background-image: linear-gradient(to right, var(--teal) 40%, var(--twilight) 100%);
  background-size: 200% 100%;
  background-position-x: 100%;
}

.btn-dark {
  color: var(--white);
  background-color: var(--black);
}

.btn-icon-container {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--black);
  overflow: hidden;
  position: relative;
}

.btn-sm > .btn-icon-container {
  width: 1.6rem;
  height: 1.6rem;
}

.btn-twilight-inverse > .btn-icon-container {
  background-color: var(--twilight);
}

.btn-twilight > .btn-icon-container,
.btn-teal > .btn-icon-container,
.btn-teal-twilight > .btn-icon-container,
.btn-dark > .btn-icon-container {
  background-color: var(--white);
}

.btn-teal-twilight-inverse > .btn-icon-container {
  background-color: var(--teal);
  background-image: linear-gradient(to right, var(--teal) 40%, var(--twilight) 100%);
  background-size: 200% 100%;
  background-position-x: 100%;
}

.btn-icon {
  width: 0.75rem;
  height: 0.75rem;
  stroke: var(--white);
  transition: all 0.3s ease-in-out;
  transform: translateX(0rem);
}

.btn-sm > .btn-icon-container > .btn-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.btn-twilight > .btn-icon-container > .btn-icon {
  stroke: var(--twilight);
}

.btn-twilight-inverse > .btn-icon-container > .btn-icon {
  stroke: var(--white);
}

.btn-teal-twilight > .btn-icon-container > .btn-icon,
.btn-teal > .btn-icon-container > .btn-icon {
  stroke: var(--teal);
}

.btn-dark > .btn-icon-container > .btn-icon {
  stroke: var(--black);
}

.btn-icon-outside {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--white);
  transition: all 0.3s ease-in-out;
  transform: translateX(-2rem);
}

.btn-sm > .btn-icon-container > .btn-icon-outside {
  width: 1.25rem;
  height: 1.25rem;
  transform: translateX(-1.5rem);
}

.btn-twilight > .btn-icon-container > .btn-icon-outside {
  stroke: var(--twilight);
}

.btn-twilight-inverse > .btn-icon-container > .btn-icon-outside {
  stroke: var(--white);
}

.btn-teal-twilight > .btn-icon-container > .btn-icon-outside,
.btn-teal > .btn-icon-container > .btn-icon-outside {
  stroke: var(--teal);
}

.btn-dark > .btn-icon-container > .btn-icon-outside {
  stroke: var(--black);
}

.btn-teal-twilight:hover {
  background-position-x: 0%;
}

.btn-teal-twilight-inverse:hover > .btn-icon-container {
  background-position-x: 0%;
}

.btn:hover > .btn-icon-container > .btn-icon,
.btn:focus > .btn-icon-container > .btn-icon {
  transform: translateX(1.5rem);
}

.btn:hover > .btn-icon-container > .btn-icon-outside,
.btn:focus > .btn-icon-container > .btn-icon-outside {
  transform: translateX(0rem);
}

.btn-sm:hover > .btn-icon-container > .btn-icon,
.btn-sm:focus > .btn-icon-container > .btn-icon {
  transform: translateX(1.5rem);
}

.btn-sm:hover > .btn-icon-container > .btn-icon-outside,
.btn-sm:focus > .btn-icon-container > .btn-icon-outside {
  transform: translateX(0rem);
}

/* ===============================================
 * Icon buttons
 * ===============================================
 */

.icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 1.25rem;
  cursor: pointer;
  background-color: var(--white);
  transition: all 0.3s ease-in-out;
}

.icon-btn-transparent {
  background-color: transparent;
}

.icon-btn-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 1.25rem;
  box-shadow: 0 0 8px transparent;
}

.icon-btn:hover, .icon-btn:focus {
  box-shadow: 0 0 8px var(--frost);
}

.icon-btn-transparent:hover, .icon-btn-transparent:focus {
  box-shadow: none;
}

.icon-btn-lg > .icon-btn-inner > .btn-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.icon-btn-lg > .icon-btn-inner > .btn-icon-outside {
  width: 2.25rem;
  height: 2.25rem;
}

.icon-btn > .icon-btn-inner > .btn-icon-outside {
  transform: translateX(-2.2rem);
}

.icon-btn:hover > .icon-btn-inner > .btn-icon,
.icon-btn:focus > .icon-btn-inner > .btn-icon {
  transform: translateX(2.2rem);
}

.icon-btn:hover > .icon-btn-inner > .btn-icon-outside,
.icon-btn:focus > .icon-btn-inner > .btn-icon-outside {
  transform: translateX(0rem);
}

.icon-btn > .icon-btn-inner > .btn-icon {
  stroke: var(--twilight);
}

.icon-btn > .icon-btn-inner > .btn-icon-outside {
  stroke: var(--twilight);
}

/* ===============================================
 * Links
 * ===============================================
 */

.link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
}

.link-text {
  font-family: "Merriweather";
  font-size: 1rem;
  display: flex;
  position: relative;
}

.link-text-alt {
  font-family: "Lato";
  font-size: 1rem;
  display: flex;
  position: relative;
}

.link > .link-text, .link > .link-text-alt {
  color: var(--black);
}

.link-twilight > .link-text, .link-twilight > .link-text-alt {
  color: var(--twilight);
}

.link-teal > .link-text, .link-teal > .link-text-alt {
  color: var(--teal);
}

.link-frost > .link-text, .link-frost > .link-text-alt {
  color: var(--frost);
}

.link-frost-light > .link-text, .link-frost-light > .link-text-alt {
  color: var(--frost-light);
}

.link-text::after, .link-text-alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 1px;
  background-color: var(--black);
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.3s ease-in-out;
}

.link-twilight > .link-text::after, .link-twilight > .link-text-alt::after {
  background-color: var(--twilight);
}

.link-teal > .link-text::after, .link-teal > .link-text-alt::after {
  background-color: var(--teal);
}

.link-frost > .link-text::after, .link-frost > .link-text-alt::after {
  background-color: var(--frost);
}

.link-frost-light > .link-text::after, .link-frost-light > .link-text-alt::after {
  background-color: var(--frost-light);
}

.link:hover > span::after {
  transform: scaleX(1);
}

.link-icon {
  width: 1rem;
  height: 1rem;
  transform: translateX(0px);
  transition: all 0.2s ease-in-out;
}

.link-twilight > .link-icon {
  stroke: var(--twilight);
}

.link-teal > .link-icon {
  stroke: var(--teal);
}

.link-frost > .link-icon {
  stroke: var(--frost);
}

.link-frost-light > .link-icon {
  stroke: var(--frost-light);
}

.link:hover > .link-icon-internal,
.link:focus > .link-icon-internal {
  transform: translateX(5px);
}

.link-icon-external {
  transform: translate(0px, 1px);
}

.link:hover > .link-icon-external,
.link:focus > .link-icon-external {
  transform: translate(5px, -4px);
}

/* 640px */
@media (min-width: 40rem) {
  .btn {
    font-size: 1.2rem;
    padding: 0.35rem 1.2rem 0.35rem 0.35rem;
    gap: 1.1rem;
  }

  .btn-text {
    font-size: 1.2rem;
  }

  .btn-icon-container {
    width: 2rem;
    height: 2rem;
  }

  .btn-sm > .btn-icon-container {
    width: 1.6rem;
    height: 1.6rem;
  }

  .btn-icon {
    width: 1rem;
    height: 1rem;
  }

  .btn-sm > .btn-icon-container > .btn-icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  .btn-icon-outside {
    width: 1.5rem;
    height: 1.5rem;
  }

  .btn-sm > .btn-icon-container > .btn-icon-outside {
    width: 1.25rem;
    height: 1.25rem;
  }

  .btn:hover > .btn-icon-container > .btn-icon,
  .btn:focus > .btn-icon-container > .btn-icon {
    transform: translateX(2rem);
  }

  .btn:hover > .btn-icon-container > .btn-icon-outside,
  .btn:focus > .btn-icon-container > .btn-icon-outside {
    transform: translateX(0rem);
  }

  .btn-sm:hover > .btn-icon-container > .btn-icon,
  .btn-sm:focus > .btn-icon-container > .btn-icon {
    transform: translateX(1.5rem);
  }

  .btn-sm:hover > .btn-icon-container > .btn-icon-outside,
  .btn-sm:focus > .btn-icon-container > .btn-icon-outside {
    transform: translateX(0rem);
  }

  .icon-btn, .icon-btn-inner {
    width: 2.5rem;
    height: 2.5rem;
  }

  .icon-btn > .icon-btn-inner > .btn-icon-outside {
    transform: translateX(-2.5rem);
  }

  .icon-btn:hover > .icon-btn-inner > .btn-icon,
  .icon-btn:focus > .icon-btn-inner > .btn-icon {
    transform: translateX(2.5rem);
  }

  .link-text, .link-text-alt {
    font-size: 1.1rem;
  }
}