theme-selector.scss

@import 'config/import';

.rich-selector {
  background: var(--card-secondary-bg);
  border-radius: var(--radius);
  border: 1px solid var(--base-10); // todo replace with functional variable
  padding: var(--su-4);
  cursor: pointer;
}

// Font styles
.font-selector--serif {
  font-family: var(--ff-serif);
}

.font-selector--sans-serif {
  font-family: var(--ff-sans-serif);
}

.font-selector--monospace {
  font-family: var(--ff-monospace);
}

.font-selector--comic-sans {
  font-family: var(--ff-comic);
}

.font-selector--open-dyslexic {
  font-family: var(--ff-dyslexic);
  font-display: swap;
}

// Theme styles
// Theme selector
.theme-preview {
  width: 100%;
  border-radius: var(--radius);
  background: var(--preview-body-bg);
  color: var(--preview-body-color);
  overflow: hidden;
  font-size: var(--fs-s);
  line-height: 1;
  box-shadow: 0 0 0 1px var(--header-shadow);

  &,
  & *,
  & * * {
    box-sizing: border-box;
  }

  &__nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--su-4);
    background: var(--preview-header);
    box-shadow: 0 1px 1px var(--preview-border);
  }

  &__search {
    width: 33%;
    height: var(--su-2);
    background: var(--preview-form);
    border-radius: 1px;
  }

  &__main {
    display: grid;
    grid-gap: var(--su-1);
    grid-template-columns: 20% 1fr 20%;
    height: var(--su-9);
    padding: var(--su-1);
    text-align: center;
  }

  &__middle {
    display: flex;
    flex-direction: column;
  }

  &__card {
    background: var(--preview-card);
    border-radius: 1px;
    display: flex;
    flex: 1 auto;
    box-shadow: 0 0 0 1px var(--preview-border);
  }
}

.theme-selector--light-theme {
  --preview-body-bg: #f9f9fa;
  --preview-body-color: #0a0a0a;
  --preview-header: #fdf9f3;
  --preview-form: #e8e7e7;
  --preview-card: #fff;
  --preview-border: rgba(0, 0, 0, 0.1);
}

.theme-selector--dark-theme {
  --preview-body-bg: #0d1219;
  --preview-body-color: #fff;
  --preview-header: #1c2938;
  --preview-form: #424a54;
  --preview-card: #202c3d;
  --preview-border: rgba(0, 0, 0, 0.1);
}

.rich-selector-radio {
  overflow: hidden;
  position: absolute;
  opacity: 0;
  left: -9999em;
  &:checked + .rich-selector--experience {
    border-color: var(--accent-brand);
    box-shadow: 0 0 0 1px var(--accent-brand);
  }
}