_theme.scss

@import './vars';
@import './mixins';

.btn-primary {
  @include button(white, var(--brand-secondary), none);
}

.btn-action {
  @include button(white, var(--button-action), none);
}

.btn-secondary {
  @include button(var(--button-secondary-color), var(--button-secondary-bg), 2px solid var(--button-secondary-border));
}

.btn-info {
  @include button(var(--text-color), var(--bg-primary-color), 2px solid var(--loader-color));
}

.btn-warning {
  @include button(var(--error-color), none, 2px solid var(--error-color));
}

.app-btn {
  @include button(white, var(--brand-primary), none);
}

#banner {
  @include banner(var(--text-color), var(--bg-primary-color));
}

.explorer-btn {
  @include button(white, var(--bg-inactive), none);
  box-shadow: var(--box-shadow);
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  &:hover {
    opacity: 1;
    transform: scale(1);
    cursor: default;
  }
}

.navbar-btn,
.dropdown-btn {
  @include button(white, #2c2938, 1px solid rgba(115, 117, 166, 0.3));
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  margin-right: 0.5rem;
  display: flex;
}

#nav-bar {
  .app-btn {
    padding: 0.25rem 1.25rem;
    border-radius: 1rem;
  }
}

.warning-text {
  font-size: 12px;
  font-family: Inter;
  line-height: 150%;
  color: var(--attention-color);
  text-transform: uppercase;
  font-weight: 500;
}

.button-loader {
  margin: 0.25rem;
  padding: 0;
  width: 1rem;
  height: 1rem;
}

.button-loader:after {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--loader-color);
  border-color: var(--loader-color) transparent var(--loader-color) transparent;
}

.tag {
  font-family: 'Glacial Indifference', sans-serif;
  padding: 0.5rem 0.75rem;
  background: var(--bg-light-accent);
  color: $button-disabled-text-color;
  width: fit-content;
  border-radius: 4px;
}

.token-icon {
  margin-left: 0.5rem;
}

.big-emoji {
  font-size: 4rem;
}

.mb2 {
  margin-bottom: 2rem;
}

.mt2 {
  margin-top: 2rem;
}

.about {
  padding-bottom: 4rem;

  .content-heading {
    border-bottom: 2px solid var(--border-color);
  }

  h2 {
    font-family: 'Glacial Indifference', sans-serif;
    font-weight: bold;
    font-size: 32px;
    letter-spacing: -0.015em;
  }

  p {
    font-size: 16px;
    line-height: 150%;
  }

  li {
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 15px;
  }
}

.divider {
  margin: 3rem 0;
  width: 100%;
  height: 3px;
  border-radius: 1px;
  background: var(--brand-tertiary);
}