@import url("./tokens.css");
@import url("metrics.css");
@import url("global.css");
@import url("gradient.css");
@import url("text.css");
@import url("layout.css");
@import url("dark.css");

/* ELEMENTS */

/* Links */

a {
  color: var(--theme);
}
a:hover {
  color: var(--theme-dark);
}

a[target="_blank"]:after,
.link.external:after,
a.external:after {
  content: "\00a0[↗]";
}

a.anchor:hover {
  text-decoration: none;
}
a.anchor:hover:after,
a.anchor:focus:after {
  content: "\00a0\1F517";
}

a.inherit, a.inherit:hover {
  color: inherit;
}

a.no-underline {
  text-decoration: none;
}

/* Avatars */

.avatar {
  --avatar-size: calc(var(--unit) * 8);
  width: var(--avatar-size);
  height: var(--avatar-size);
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--grey-light-500);
  background: var(--grey-light-500);
  padding: 0;
}
.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button.avatar {
  border-color: var(--theme);
  min-height: unset;
}
button.avatar:active {
  border-color: var(--background);
  opacity: 0.85;
}

.avatar.small {
  --avatar-size: calc(var(--unit) * 4);
}

.avatar.large {
  --avatar-size: calc(var(--unit) * 16);
}

/* Buttons */

button,
.button {
  /* reset */
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-touch-callout: none;

  /* styles */
  font-family: var(--font);
  padding: var(--spacing-xs) var(--spacing-lg);
  line-height: 1;
  min-height: calc(var(--unit) * 5.5);
  font-size: var(--font-size);
  border-radius: var(--spacing-md);
  -webkit-border-radius: var(--spacing-md);
  border: 1px solid;
  font-weight: 500;
  color: var(--button-color);
  background: linear-gradient(
    80deg,
    var(--button-bg-color-1) 25%,
    var(--button-bg-color-2) 100%
  );
  border-color: var(--button-border-color);
  margin: 0;
}
button:not(:disabled):hover,
.button:not(:disabled):hover {
  background: linear-gradient(
    80deg,
    var(--button-hover-color-1) 25%,
    var(--button-hover-color-2) 100%
  );
}
button:not(:disabled):active,
.button:not(:disabled):active {
  background: var(--button-active-color);
}

button.primary,
.button.primary {
  color: var(--button-primary-color);
  background: linear-gradient(
    80deg,
    var(--button-primary-bg-color-1) 25%,
    var(--button-primary-bg-color-2) 100%
  );
  border-color: var(--button-primary-border-color);
}
button.primary:not(:disabled):hover,
.button.primary:not(:disabled):hover {
  background: linear-gradient(
    80deg,
    var(--button-primary-hover-color-1) 25%,
    var(--button-primary-hover-color-2) 100%
  );
}
button.primary:not(:disabled):active,
.button.primary:not(:disabled):active {
  background: var(--button-primary-active-color);
}

button.secondary,
.button.secondary {
  color: var(--button-secondary-color);
  background: linear-gradient(
    80deg,
    var(--button-secondary-bg-color-1) 25%,
    var(--button-secondary-bg-color-2) 100%
  );
  border-color: var(--button-secondary-border-color);
}
button.secondary:not(:disabled):hover,
.button.secondary:not(:disabled):hover {
  background: linear-gradient(
    80deg,
    var(--button-secondary-hover-color-1) 25%,
    var(--button-secondary-hover-color-2) 100%
  );
}
button.secondary:not(:disabled):active,
.button.secondary:not(:disabled):active {
  background: var(--button-secondary-active-color);
}
.secondary:focus {
  box-shadow: 0 0 0 calc(var(--unit) / 4) var(--background),
    0 0 0 calc(var(--unit) / 2) var(--secondary);
}

button.danger,
.button.danger {
  color: var(--button-danger-color);
  background: linear-gradient(
    80deg,
    var(--button-danger-bg-color-1) 25%,
    var(--button-danger-bg-color-2) 100%
  );
  border-color: var(--button-danger-border-color);
}
button.danger:not(:disabled):hover,
.button.danger:not(:disabled):hover {
  background: linear-gradient(
    80deg,
    var(--button-danger-hover-color-1) 25%,
    var(--button-danger-hover-color-2) 100%
  );
}
button.danger:not(:disabled):active,
.button.danger:not(:disabled):active {
  background: var(--button-danger-active-color);
}
.danger:focus {
  box-shadow: 0 0 0 calc(var(--unit) / 4) var(--background),
    0 0 0 calc(var(--unit) / 2) var(--danger);
}

button:disabled,
.button:disabled,
button.disabled,
.button.disabled {
  cursor: not-allowed;
  opacity: 0.33;
}

button.text-only,
.button.text-only {
  background: none;
  border-color: transparent;
  color: var(--button-text-only-color);
}
button.text-only:hover,
.button.text-only:hover,
button.text-only:focus,
.button.text-only:focus {
  color: var(--button-text-only-hover-color);
  background: linear-gradient(
    80deg,
    var(--button-text-only-hover-bg-color-1) 25%,
    var(--button-text-only-hover-bg-color-2) 100%
  );
}
button.text-only.primary,
.button.text-only.primary {
  color: var(--button-primary-text-only-color);
}
button.text-only.primary:hover,
.button.text-only.primary:hover,
button.text-only.primary:focus,
.button.text-only.primary:focus {
  color: var(--button-primary-text-only-hover-color);
  background: linear-gradient(
    80deg,
    var(--button-primary-text-only-hover-bg-color-1) 25%,
    var(--button-primary-text-only-hover-bg-color-2) 100%
  );
}
button.text-only.secondary,
.button.text-only.secondary {
  color: var(--button-secondary-text-only-color);
}
button.text-only.secondary:hover,
.button.text-only.secondary:hover,
button.text-only.secondary:focus,
.button.text-only.secondary:focus {
  color: var(--button-secondary-text-only-hover-color);
  background: linear-gradient(
    80deg,
    var(--button-secondary-text-only-hover-bg-color-1) 25%,
    var(--button-secondary-text-only-hover-bg-color-2) 100%
  );
}
button.text-only.danger,
.button.text-only.danger {
  color: var(--button-danger-text-only-color);
}

button.text-only.danger:hover,
.button.text-only.danger:hover,
button.text-only.danger:focus,
.button.text-only.danger:focus {
  color: var(--button-danger-text-only-hover-color);
  background: linear-gradient(
    80deg,
    var(--button-danger-text-only-hover-bg-color-1) 25%,
    var(--button-danger-text-only-hover-bg-color-2) 100%
  );
}

/* A button that inherits all its styles from parent */
button.reset {
  padding: 0;
  border: none;
  font: inherit !important;
  color: inherit !important;
  border-color: unset;
  background: transparent !important;
  cursor: pointer;
  min-height: unset;
  border-radius: 0;
  line-height: inherit !important;
}

.menu {
  display: inline-block;
}

.menu ul {
  position: absolute;
  margin: 0;
  background: var(--menu-background);
  color: var(--menu-color);
  padding: 0;
  border-radius: var(--menu-border-radius);
  box-shadow: 0 0 var(--spacing-sm) var(--spacing-xs) rgba(0, 0, 0, 0.075);

}
.menu li {
  display: none;
  padding: var(--spacing-sm) var(--spacing-md);
  list-style: none;
  line-height: 1.2;
  max-width: calc(var(--unit) * 32);
}

.menu li:first-child {
  border-top-left-radius: var(--menu-border-radius);
  border-top-right-radius: var(--menu-border-radius);
  padding-top: var(--spacing-md);
}
.menu li:last-child {
  border-bottom-left-radius: var(--menu-border-radius);
  border-bottom-right-radius: var(--menu-border-radius);
  padding-bottom: var(--spacing-md);
}

.menu li:hover, .menu li:focus-within {
  background: var(--menu-hover-background);
}

.menu.open li, .menu.open-on-hover:hover li, .menu.open-on-hover:focus-within li {
  display: block;
}

/* code-sandbox-only fix */
iframe {
  display: none;
}