<|start_filename|>src/css/dropdown.css<|end_filename|>
/* Base elements */

.a-dropdown {
  position: relative;
}

.a-dropdown label {
  position: absolute;
  top: 8px;
  left: 16px;
  font: var(--font-secondary);
  font-size: var(--font-size-1-5base);
  font-weight: 700;
  color: var(--color-moon-400);
  pointer-events: none;
}

.a-dropdown input {
  width: 100%;
  padding: 24px 56px 4px 16px;
  appearance: none;
  font: var(--font-secondary);
  color: var(--font-color);
  background-color: var(--color-space-100);
  border: 1px solid var(--color-moon-500);
  border-radius: 8px;
}

.a-dropdown span {
  position: absolute;
  top: 12px;
  right: 16px;
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--color-moon-300);
  mask-image: url('../../assets/icons/drop-down.svg');
}

.a-dropdown input::placeholder {
  color: var(--color-moon-400);
}

/* Options list */

.a-dropdown input ~ ul {
  position: absolute;
  z-index: var(--z-index-1);
  display: none;
  width: 100%;
  min-height: 2em;
  padding-bottom: 16px;
  margin: 0;
  background-color: var(--color-space-100);
  border-color: var(--color-uranus-500);
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 8px 8px;
}

.a-dropdown input ~ ul a {
  display: block;
  padding: 4px 16px;
  font: var(--font-secondary);
  color: var(--color-moon-300);
}

.a-dropdown input ~ ul a:hover {
  color: var(--color-moon-400);
  cursor: pointer;
  background-color: #f1f8fe;
}

.a-dropdown input ~ ul a em {
  font-style: normal;
  color: var(--color-uranus-500);
}

/* Opened state */

.a-dropdown.a-dropdown--opened input,
.a-dropdown input:focus {
  border-color: var(--color-uranus-500);
  outline: none;
}

.a-dropdown.a-dropdown--opened input {
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
}

.a-dropdown input:focus ~ label,
.a-dropdown.a-dropdown--opened input ~ label {
  color: var(--color-uranus-500);
}

.a-dropdown.a-dropdown--opened input ~ span {
  background-color: var(--color-uranus-500);
  mask-image: url('../../assets/icons/drop-up.svg');
}

.a-dropdown.a-dropdown--opened input ~ ul {
  display: block;
}

/* Search variant */

.a-dropdown.a-dropdown--search span {
  top: 8px;
  background-color: var(--color-moon-600);
  mask-image: url('../../assets/icons/magnifier.svg');
}

.a-dropdown.a-dropdown--search.a-dropdown--opened input ~ span {
  background-color: var(--color-uranus-500);
  mask-image: url('../../assets/icons/magnifier.svg');
}

.a-dropdown span:hover,
.a-dropdown.a-dropdown--search span:hover {
  cursor: pointer;
  background-color: var(--color-uranus-500);
}

.a-dropdown.a-dropdown--search label {
  display: none;
}

.a-dropdown.a-dropdown--search input {
  padding: 12px 16px;
}

/* Disabled state */

.a-dropdown.a-dropdown--disabled input,
.a-dropdown.a-dropdown--disabled span {
  color: var(--color-moon-300);
  cursor: not-allowed;
  background-color: var(--color-moon-100);
  border: 1px solid var(--color-moon-200);
}

/* Validated state */

.a-dropdown.a-dropdown--validated input,
.a-dropdown.a-dropdown--validated.a-dropdown--opened input ~ ul {
  border-color: var(--color-earth-400);
}

.a-dropdown.a-dropdown--validated.a-dropdown--opened input {
  border-bottom-color: transparent;
}

.a-dropdown.a-dropdown--validated input:focus ~ label,
.a-dropdown.a-dropdown--validated.a-dropdown--opened input ~ label {
  color: var(--color-earth-600);
}

.a-dropdown.a-dropdown--validated span {
  mask-image: url('../../assets/icons/circle-check.svg');
}

.a-dropdown.a-dropdown--validated span,
.a-dropdown.a-dropdown--validated.a-dropdown--opened input ~ span {
  background-color: var(--color-earth-400);
}

/* Invalid state */

.a-dropdown.a-dropdown--invalid input,
.a-dropdown.a-dropdown--invalid.a-dropdown--opened input ~ ul {
  border-color: var(--color-mars-500);
}

.a-dropdown.a-dropdown--invalid.a-dropdown--opened input {
  border-bottom-color: transparent;
}

.a-dropdown.a-dropdown--invalid input:focus ~ label,
.a-dropdown.a-dropdown--invalid.a-dropdown--opened input ~ label {
  color: var(--color-mars-500);
}

.a-dropdown.a-dropdown--invalid span {
  mask-image: url('../../assets/icons/alert.svg');
}

.a-dropdown.a-dropdown--invalid span,
.a-dropdown.a-dropdown--invalid.a-dropdown--opened input ~ span {
  background-color: var(--color-mars-500);
}


<|start_filename|>src/css/base.css<|end_filename|>
.a-body {
  /* styles replicated in typography to allow isolation */
  font: var(--font-primary);
  color: var(--font-color);
  text-rendering: optimizeLegibility;
}

*,
::after,
::before {
  box-sizing: border-box;
}

figure {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

li,
ul {
  padding: 0;
  list-style: none;
}

/* Remove all animations and transitions for people that don't wanna see them */
@media (prefers-reduced-motion: reduce) {

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


<|start_filename|>src/css/tabs.css<|end_filename|>
/* Base */

.a-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

/* Border */

.a-tabs__border {
  position: absolute;
  z-index: var(--z-index-1);
  display: block;
  width: 100%;
  height: 48px;
  border: solid 1px var(--color-moon-300);
  border-radius: 24px;
}

/* Default component */

.a-tabs > .a-tabs__item {
  position: absolute;
  opacity: 0;
}

/* Tab */

.a-tabs > .a-tabs__label {
  z-index: var(--z-index-2);
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 32px;
  margin: 4px 0;
  font: var(--font-primary);
  font-size: var(--font-size-1-5base);
  font-weight: 600;
  color: var(--color-moon-500);
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
  border: none;
  border-radius: 24px;
  transition: background-color 0.3s ease, color 0.3s ease;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.a-tabs > .a-tabs__label:first-of-type {
  margin-left: 4px;
}

.a-tabs > .a-tabs__label:last-of-type {
  margin-right: 4px;
}

/* Icon */

.a-tabs__icon {
  min-width: 16px;
  background-color: var(--color-moon-500);
  transition: background-color 0.3s ease;
}

/* Contents */

.a-tabs > .a-tabs__content {
  display: none;
  width: 100%;
  padding: 16px;
  order: 99;
}

/* Current content */

.a-tabs > .a-tabs__item:checked + .a-tabs__label + .a-tabs__content {
  display: block;
}

/* Focus state */

.a-tabs > .a-tabs__item:focus + .a-tabs__label {
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

/* Active state */

.a-tabs > .a-tabs__item:checked + .a-tabs__label {
  color: var(--color-space-100);
  background-color: var(--color-uranus-500);
}

.a-tabs > .a-tabs__item:checked + .a-tabs__label .a-tabs__icon {
  background-color: var(--color-moon-100);
}

/* Hover state */

.a-tabs > .a-tabs__item:not(:checked):hover + .a-tabs__label {
  cursor: pointer;
  background-color: var(--color-moon-200);
}

@media only screen and (max-width: 47em) {
  /* Small screens or not horizontal tabs */

  .a-tabs:not(.a-tabs--horizontal) .a-tabs__border {
    display: none;
  }

  .a-tabs:not(.a-tabs--horizontal) > .a-tabs__label {
    border: solid 1px var(--color-moon-300);
    flex: auto;
  }

  .a-tabs:not(.a-tabs--horizontal) > .a-tabs__label:first-of-type {
    margin-left: 0;
  }

  .a-tabs:not(.a-tabs--horizontal) > .a-tabs__label:last-of-type {
    margin-right: 0;
  }

  /* Hover state */

  .a-tabs:not(.a-tabs--horizontal) > .a-tabs__item:checked + .a-tabs__label {
    border-color: var(--color-uranus-500);
  }
}

/* 2020 tabs component */

.a-tabbed__list {
  padding: 0;
}

.a-tabbed__list li,
.a-tabbed__list a {
  display: inline-block;
}

.a-tabbed__list a {
  padding: 10px 20px 8px;
  font: var(--font-primary);
  font-size: var(--font-size-1-5base);
  line-height: 26px;
  color: var(--color-moon-500);
  text-decoration: none;
}

.a-tabbed__list li a {
  vertical-align: middle;
  border-bottom: 2px solid var(--color-moon-300);
}

.a-tabbed__list a:hover {
  color: var(--color-moon-300);
  border-bottom: 2px solid var(--color-moon-200);
}

.a-tabbed__list [aria-selected='true'] {
  color: var(--color-uranus-500);
  border-bottom: 2px solid var(--color-uranus-500);
}

.a-tabbed__list .a-tabbed__icon {
  position: relative;
  top: -2px;
  background-color: var(--color-moon-900);
}

.a-tabbed__list [aria-selected='true'] .a-tabbed__icon {
  background-color: var(--color-uranus-500);
}

.a-tabbed__list a:hover .a-tabbed__icon {
  background-color: var(--color-space-400);
}


<|start_filename|>src/css/buttons.css<|end_filename|>
/* Please don't change the order of the style blocks in this file as it may break the cascade */

/* Base button styles */

.a-btn {
  display: inline-block;
  overflow: hidden;
  font: var(--font-primary);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}

.a-btn:disabled,
.a-btn.a-btn--disabled {
  color: var(--color-space-100);
  cursor: not-allowed;
  background-color: var(--color-moon-200);
  border-color: var(--color-moon-200);
}

.a-btn:focus {
  outline: none;
}

/* Button color modifiers */

.a-btn--uranus {
  color: var(--color-space-100);
  background-color: var(--color-uranus-500);
  border: 2px solid var(--color-uranus-500);
}

.a-btn--uranus:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--uranus:focus:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-uranus-300);
  border-color: var(--color-uranus-300);
}

.a-btn--uranus:active:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-uranus-600);
  border-color: var(--color-uranus-600);
}

.a-btn--venus {
  color: var(--color-space-100);
  background-color: var(--color-venus-400);
  border: 2px solid var(--color-venus-400);
}

.a-btn--venus:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--venus:focus:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-venus-200);
  border-color: var(--color-venus-200);
}

.a-btn--venus:active:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-venus-500);
  border-color: var(--color-venus-500);
}

.a-btn--mars {
  color: var(--color-space-100);
  background-color: var(--color-mars-500);
  border: 2px solid var(--color-mars-500);
}

.a-btn--mars:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--mars:focus:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-mars-300);
  border-color: var(--color-mars-300);
}

.a-btn--mars:active:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-mars-600);
  border-color: var(--color-mars-600);
}

.a-btn--earth {
  color: var(--color-moon-900);
  background-color: var(--color-earth-400);
  border: 2px solid var(--color-earth-400);
}

.a-btn--earth:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--earth:focus:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-earth-200);
  border-color: var(--color-earth-200);
}

.a-btn--earth:active:not(:disabled):not(.a-btn--disabled) {
  background-color: var(--color-earth-500);
  border-color: var(--color-earth-500);
}

/* Outline button */

.a-btn--outline-uranus {
  color: var(--color-uranus-500);
  background-color: transparent;
  border: 2px solid var(--color-uranus-500);
}

.a-btn--outline-uranus:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--outline-uranus:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-space-100);
  background-color: var(--color-uranus-400);
  border-color: var(--color-uranus-400);
}

.a-btn--outline-uranus:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-space-100);
  background-color: var(--color-uranus-600);
  border-color: var(--color-uranus-600);
}

.a-btn--outline-venus {
  color: var(--color-venus-400);
  background-color: transparent;
  border: 2px solid var(--color-venus-400);
}

.a-btn--outline-venus:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--outline-venus:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-space-100);
  background-color: var(--color-venus-300);
  border-color: var(--color-venus-300);
}

.a-btn--outline-venus:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-space-100);
  background-color: var(--color-venus-500);
  border-color: var(--color-venus-500);
}

.a-btn--outline-earth {
  color: var(--color-earth-600);
  background-color: transparent;
  border: 2px solid var(--color-earth-600);
}

.a-btn--outline-earth:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--outline-earth:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-moon-900);
  background-color: var(--color-earth-300);
  border-color: var(--color-earth-300);
}

.a-btn--outline-earth:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-moon-900);
  background-color: var(--color-earth-500);
  border-color: var(--color-earth-500);
}

.a-btn--outline-mars {
  color: var(--color-mars-500);
  background-color: transparent;
  border: 2px solid var(--color-mars-500);
}

.a-btn--outline-mars:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--outline-mars:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-space-100);
  background-color: var(--color-mars-400);
  border-color: var(--color-mars-400);
}

.a-btn--outline-mars:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-space-100);
  background-color: var(--color-mars-600);
  border-color: var(--color-mars-600);
}

.a-btn--outline-uranus:disabled,
.a-btn--outline-venus:disabled,
.a-btn--outline-earth:disabled,
.a-btn--outline-mars:disabled,
.a-btn--outline-uranus.a-btn--disabled,
.a-btn--outline-venus.a-btn--disabled,
.a-btn--outline-earth.a-btn--disabled,
.a-btn--outline-mars.a-btn--disabled {
  color: var(--color-moon-200);
  cursor: not-allowed;
  background-color: transparent;
  border-color: var(--color-moon-200);
}

/* Ghost button base */

.a-btn--ghost-uranus {
  color: var(--color-uranus-500);
  background-color: transparent;
  border: 2px solid transparent;
}

.a-btn--ghost-uranus:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--ghost-uranus:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-uranus-400);
  background-color: var(--color-moon-100);
  border-color: var(--color-moon-100);
}

.a-btn--ghost-uranus:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-uranus-600);
  background-color: var(--color-moon-200);
  border-color: var(--color-moon-200);
}

.a-btn--ghost-venus {
  color: var(--color-venus-400);
  background-color: transparent;
  border: 2px solid transparent;
}

.a-btn--ghost-venus:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--ghost-venus:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-venus-300);
  background-color: var(--color-moon-100);
  border-color: var(--color-moon-100);
}

.a-btn--ghost-venus:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-venus-500);
  background-color: var(--color-moon-200);
  border-color: var(--color-moon-200);
}

.a-btn--ghost-earth {
  color: var(--color-earth-600);
  background-color: transparent;
  border: 2px solid transparent;
}

.a-btn--ghost-earth:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--ghost-earth:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-earth-300);
  background-color: var(--color-moon-100);
  border-color: var(--color-moon-100);
}

.a-btn--ghost-earth:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-earth-800);
  background-color: var(--color-moon-200);
  border-color: var(--color-moon-200);
}

.a-btn--ghost-mars {
  color: var(--color-mars-500);
  background-color: transparent;
  border: 2px solid transparent;
}

.a-btn--ghost-mars:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--ghost-mars:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-mars-400);
  background-color: var(--color-moon-100);
  border-color: var(--color-moon-100);
}

.a-btn--ghost-mars:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-mars-600);
  background-color: var(--color-moon-200);
  border-color: var(--color-moon-200);
}

.a-btn--ghost-uranus:disabled,
.a-btn--ghost-venus:disabled,
.a-btn--ghost-earth:disabled,
.a-btn--ghost-mars:disabled,
.a-btn--ghost-uranus.a-btn--disabled,
.a-btn--ghost-venus.a-btn--disabled,
.a-btn--ghost-earth.a-btn--disabled,
.a-btn--ghost-mars.a-btn--disabled {
  color: var(--color-moon-200);
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
}

/* Iconlabel button */

.a-btn--iconlabel .a-icon {
  margin: -4px 9px -3px 0;
  background-color: var(--color-space-100);
  transition: all 0.3s ease;
}

.a-btn--iconlabel-right .a-icon {
  margin: -4px 0 -3px 9px;
}

.a-btn--iconlabel.a-btn--earth .a-icon {
  background-color: var(--color-moon-900);
}

/* Icon button */

.a-btn--icon .a-icon {
  margin: -4px 0 -3px;
  background-color: var(--color-space-100);
  transition: all 0.3s ease;
}

/* Outline iconlabel button */

.a-btn--outline-uranus .a-icon {
  background-color: var(--color-uranus-500);
}

.a-btn--outline-venus .a-icon {
  background-color: var(--color-venus-400);
}

.a-btn--outline-earth .a-icon {
  background-color: var(--color-earth-600);
}

.a-btn--outline-mars .a-icon {
  background-color: var(--color-mars-500);
}

.a-btn--outline-uranus:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-venus:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-mars:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-uranus:active:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-venus:active:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-mars:active:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-uranus:focus:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-venus:focus:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-mars:focus:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-space-100);
}

.a-btn--outline-earth:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-earth:active:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--outline-earth:focus:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-moon-900);
}

.a-btn--outline-uranus:disabled .a-icon,
.a-btn--outline-venus:disabled .a-icon,
.a-btn--outline-earth:disabled .a-icon,
.a-btn--outline-mars:disabled .a-icon,
.a-btn--outline-uranus.a-btn--disabled .a-icon,
.a-btn--outline-venus.a-btn--disabled .a-icon,
.a-btn--outline-earth.a-btn--disabled .a-icon,
.a-btn--outline-mars.a-btn--disabled .a-icon {
  background-color: var(--color-moon-200);
}

/* Ghost iconlabel button */

.a-btn--ghost-uranus .a-icon {
  background-color: var(--color-uranus-500);
}

.a-btn--ghost-uranus:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--ghost-uranus:focus:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-uranus-400);
}

.a-btn--ghost-uranus:active:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-uranus-600);
}

.a-btn--ghost-venus .a-icon {
  background-color: var(--color-venus-400);
}

.a-btn--ghost-venus:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--ghost-venus:focus:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-venus-300);
}

.a-btn--ghost-venus:active:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-venus-500);
}

.a-btn--ghost-earth .a-icon {
  background-color: var(--color-earth-600);
}

.a-btn--ghost-earth:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--ghost-earth:focus:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-earth-300);
}

.a-btn--ghost-earth:active:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-earth-800);
}

.a-btn--ghost-mars .a-icon {
  background-color: var(--color-mars-500);
}

.a-btn--ghost-mars:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--ghost-mars:focus:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-mars-400);
}

.a-btn--ghost-mars:active:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-mars-600);
}

.a-btn--ghost-uranus:disabled .a-icon,
.a-btn--ghost-venus:disabled .a-icon,
.a-btn--ghost-earth:disabled .a-icon,
.a-btn--ghost-mars:disabled .a-icon,
.a-btn--ghost-uranus.a-btn--disabled .a-icon,
.a-btn--ghost-venus.a-btn--disabled .a-icon,
.a-btn--ghost-earth.a-btn--disabled .a-icon,
.a-btn--ghost-mars.a-btn--disabled .a-icon {
  background-color: var(--color-moon-200);
}

/* Icon link button */

.a-btn--iconlink {
  display: inline-block;
  overflow: hidden;
  font: var(--font-secondary);
  color: var(--color-space-100);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background-color: transparent;
  border: none;
  transition: all 0.3s ease;
}

.a-btn--iconlink:hover:not(:disabled):not(.a-btn--disabled),
.a-btn--iconlink:focus:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-uranus-500);
  outline: none;
}

.a-btn--iconlink:active:not(:disabled):not(.a-btn--disabled) {
  color: var(--color-uranus-800);
}

.a-btn--iconlink:hover:not(:disabled):not(.a-btn--disabled) .a-icon,
.a-btn--iconlink:focus:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-uranus-500);
}

.a-btn--iconlink:active:not(:disabled):not(.a-btn--disabled) .a-icon {
  background-color: var(--color-uranus-800);
}

.a-btn--iconlink .a-icon {
  margin: -4px 9px -3px 0;
  background-color: var(--color-space-100);
  transition: all 0.3s ease;
}

.a-btn--iconlink-right .a-icon {
  margin: -4px 0 -3px 9px;
}

.a-btn--iconlink.a-btn--iconlink-bold {
  font-weight: 700;
}

.a-btn--iconlink:disabled,
.a-btn--iconlink.a-btn--disabled {
  color: var(--color-moon-200);
  cursor: not-allowed;
}

.a-btn--iconlink:disabled .a-icon,
.a-btn--iconlink.a-btn--disabled .a-icon {
  background-color: var(--color-moon-200);
}

/* Button size modifiers */

.a-btn--small {
  padding: 5px 28px;
  font-size: var(--font-size-1-5base);
  line-height: 18px;
  border-radius: 16px;
}

.a-btn--medium {
  padding: 8px 38px;
  font-size: var(--font-size-2base);
  line-height: 28px;
  border-radius: 24px;
}

.a-btn--large {
  padding: 12px 46px;
  font-size: var(--font-size-3base);
  line-height: 35px;
  border-radius: 31px;
}

.a-btn--icon.a-btn--small {
  padding: 5px 2px;
}

.a-btn--icon.a-btn--medium {
  padding: 8px 6px;
}

.a-btn--icon.a-btn--large {
  padding: 11px 9px;
}

/* Inline link */

.a-link {
  color: var(--color-uranus-700);
  text-decoration: underline;
  word-wrap: break-word;
  cursor: pointer;
}

.a-link:hover {
  color: var(--color-uranus-500);
}

.a-link:active {
  color: var(--color-uranus-800);
}

.a-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

a.a-btn {
  text-decoration: none;
}


<|start_filename|>postcss.config.js<|end_filename|>
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-css-variables')({
      preserve: 'computed'
    }),
    require('autoprefixer'),
    require('cssnano')({
      preset: [
        'default',
        {
          discardComments: {
            removeAll: true
          }
        }
      ]
    }),
    require('postcss-url')({
      url: 'rebase',
      assetsPath: '../'
    })
  ]
};


<|start_filename|>src/css/colors.css<|end_filename|>
:root {
  --color-earth-100: #b8fcac;
  --color-earth-200: #9cf184;
  --color-earth-300: #88e967;
  --color-earth-400: #74e24a;
  --color-earth-500: #56b53f;
  --color-earth-600: #469d39;
  --color-earth-700: #388833;
  --color-earth-800: #276f2d;
  --color-earth-900: #145327;
  --color-earth-1000: #084222;
  --color-mars-100: #ffcace;
  --color-mars-200: #f6b1b5;
  --color-mars-300: #ea9297;
  --color-mars-400: #dd676b;
  --color-mars-500: #d45459;
  --color-mars-600: #ac3c40;
  --color-mars-700: #9a3135;
  --color-mars-800: #7b1e22;
  --color-mars-900: #651115;
  --color-mars-1000: #500508;
  --color-moon-100: #f6f7f8;
  --color-moon-200: #e9eef2;
  --color-moon-300: #afbec9;
  --color-moon-400: #8296a4;
  --color-moon-500: #597183;
  --color-moon-600: #495c69;
  --color-moon-700: #3f4c55;
  --color-moon-800: #384248;
  --color-moon-900: #32383c;
  --color-moon-1000: #1c2124;
  --color-space-100: #fff;
  --color-space-200: #f5f5f5;
  --color-space-300: #e5e5e5;
  --color-space-400: #c5c5c5;
  --color-space-500: #a5a5a5;
  --color-space-600: #858585;
  --color-space-700: #656565;
  --color-space-800: #454545;
  --color-space-900: #353535;
  --color-space-1000: #202020;
  --color-sun-100: #fffec1;
  --color-sun-200: #fbee88;
  --color-sun-300: #f7e05b;
  --color-sun-400: #f4d330;
  --color-sun-500: #f1c500;
  --color-sun-600: #cea800;
  --color-sun-700: #b19100;
  --color-sun-800: #8f7600;
  --color-sun-900: #685500;
  --color-sun-1000: #4b3e00;
  --color-uranus-100: #a6f7ff;
  --color-uranus-200: #86e3f9;
  --color-uranus-300: #67cff3;
  --color-uranus-400: #3db5eb;
  --color-uranus-500: #159ce4;
  --color-uranus-600: #147ec1;
  --color-uranus-700: #1663a0;
  --color-uranus-800: #16518b;
  --color-uranus-900: #183a6e;
  --color-uranus-1000: #182758;
  --color-venus-100: #ffc3f9;
  --color-venus-200: #f0a0e9;
  --color-venus-300: #e78ade;
  --color-venus-400: #e078d6;
  --color-venus-500: #c763ba;
  --color-venus-600: #ab4b9a;
  --color-venus-700: #993c85;
  --color-venus-800: #842a6d;
  --color-venus-900: #6b1550;
  --color-venus-1000: #5c083f;
}


<|start_filename|>docs/js/slider.js<|end_filename|>
export const changeSliderValue = () => {
  window.requestAnimationFrame(() => {
    const slider = document.querySelector("#slider1");
    const counter = document.querySelector(".a-slider__value");

    slider.addEventListener("input", function() {
      const sliderValue = slider.value;

      slider.style.setProperty("--slider-percentage", `${sliderValue}%`);
      counter.innerText = `${sliderValue} coins`;
    });
  });
};

const HandleSliderValue = () => {
  changeSliderValue();
  return null;
};

export default HandleSliderValue;


<|start_filename|>src/css/gradients.css<|end_filename|>
:root {
  --gradient-nebulosa: linear-gradient(47.32deg, #d991e0 0%, #00c6d4 60.06%, #00ea60 100%);
  --gradient-andromeda: linear-gradient(45deg, #ea9297 0%, #e078d6 100%);
  --gradient-sombrero: linear-gradient(45.52deg, #9cf184 0%, #3db5eb 100%);
  --gradient-milky-way: linear-gradient(44.64deg, #159ce4 0%, #e078d6 100%);
  --gradient-centaurus: linear-gradient(225deg, #e078d6 0%, #993c85 100%);
  --gradient-whirlpool: linear-gradient(225deg, #9cf184 0%, #56b53f 100%);
  --gradient-cartwheel: linear-gradient(45deg, #147ec1 0%, #3db5eb 100%);
  --gradient-black-hole: linear-gradient(225deg, #3f4c55 0%, #1c2124 100%);
  --gradient-mayall: linear-gradient(225deg, #ea9297 0%, #dd676b 100%);
  --gradient-hoag: linear-gradient(223.9deg, #fbee88 0%, #f1c500 100%);
  --gradient-pinwheel: linear-gradient(45deg, #8296a4 0%, #bac8d1 100%);
}


<|start_filename|>src/css/slider.css<|end_filename|>
/* Variables - insert current slider value with JS in this variable to get a working color fill */

:root {
  --slider-percentage: 50%;
}

.a-slider {
  display: flex;
  flex-direction: column-reverse;
}

/* Reset standard input styles */

.a-slider > input[type='range'] {
  width: 100%;
  outline: none;
  appearance: none;
}

/* Labels */

.a-slider > label {
  display: flex;
  margin-bottom: 20px;
  font: var(--font-secondary);
  color: var(--font-color);
  order: 1;
}

.a-slider__value {
  margin-left: auto;
  font-weight: 600;
}

.a-slider > input[type='range']:disabled ~ label {
  color: var(--color-moon-200);
}

/* Chrome - always replicate styles for each browser, it's the only way :( */

.a-slider > input[type='range']::-webkit-slider-runnable-track {
  display: flex;
  height: 5px;
  background-color: var(--color-moon-300);
  background-image:
    linear-gradient(
      to right,
      var(--color-uranus-500) var(--slider-percentage),
      transparent var(--slider-percentage)
    );
  border-radius: 4px;
  align-items: center;
}

.a-slider.a-slider--full > input[type='range']::-webkit-slider-runnable-track {
  background-image: var(--gradient-cartwheel);
}

.a-slider > input[type='range']::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-color: var(--color-space-100);
  border-radius: 100%;
  box-shadow: 0 1px 4px 0 rgba(135, 135, 135, 0.5);
  transition: all 0.3s ease;
  appearance: none;
}

.a-slider > input[type='range']:not(:disabled)::-webkit-slider-thumb:hover,
.a-slider > input[type='range']:focus::-webkit-slider-thumb {
  width: 36px;
  height: 36px;
}

.a-slider > input[type='range']:not(:disabled)::-webkit-slider-thumb:active {
  width: 40px;
  height: 40px;
}

.a-slider > input[type='range']:disabled::-webkit-slider-runnable-track {
  cursor: not-allowed;
  background-color: var(--color-moon-200);
  background-image: none;
}

.a-slider > input[type='range']:disabled::-webkit-slider-thumb {
  display: none;
}

/* Firefox - always replicate styles for each browser, it's the only way :(
  Some styles below are slightly different from Chrome */

.a-slider > input[type='range']::-moz-range-track {
  display: flex;
  height: 5px;
  background-color: var(--color-moon-300);
  background-image:
    linear-gradient(
      to right,
      var(--color-uranus-500) var(--slider-percentage),
      transparent var(--slider-percentage)
    );
  border-radius: 4px;
  align-items: center;
}

.a-slider.a-slider--full > input[type='range']::-moz-range-track {
  background-image: var(--gradient-cartwheel);
}

.a-slider > input[type='range']::-moz-range-thumb {
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-color: var(--color-space-100);
  border: none;
  border-radius: 100%;
  box-shadow: 0 1px 4px 0 rgba(135, 135, 135, 0.5);
  transition: all 0.3s ease;
  appearance: none;
}

.a-slider > input[type='range']:not(:disabled)::-moz-range-thumb:hover {
  width: 36px;
  height: 36px;
}

.a-slider > input[type='range']:not(:disabled)::-moz-range-thumb:active {
  width: 40px;
  height: 40px;
}

.a-slider > input[type='range']:disabled {
  cursor: not-allowed;
  background-color: transparent;
}

.a-slider > input[type='range']:disabled::-moz-range-track {
  cursor: not-allowed;
  background-color: var(--color-moon-200);
  background-image: none;
}

.a-slider > input[type='range']:disabled::-moz-range-thumb {
  visibility: hidden;
}

/* IE - always replicate styles for each browser, it's the only way :( */

.a-slider > input[type='range']::-ms-track {
  display: flex;
  height: 5px;
  background-color: var(--color-moon-300);
  background-image:
    linear-gradient(
      to right,
      var(--color-uranus-500) var(--slider-percentage),
      transparent var(--slider-percentage)
    );
  border-radius: 4px;
  align-items: center;
}

.a-slider.a-slider--full > input[type='range']::-ms-track {
  background-image: var(--gradient-cartwheel);
}

.a-slider > input[type='range']::-ms-thumb {
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-color: var(--color-space-100);
  border-radius: 100%;
  box-shadow: 0 1px 4px 0 rgba(135, 135, 135, 0.5);
  transition: all 0.3s ease;
  appearance: none;
}

.a-slider > input[type='range']:not(:disabled)::-ms-thumb:hover {
  width: 36px;
  height: 36px;
}

.a-slider > input[type='range']:not(:disabled)::-ms-thumb:active {
  width: 40px;
  height: 40px;
}

.a-slider > input[type='range']:disabled::-ms-track {
  cursor: not-allowed;
  background-color: var(--color-moon-200);
  background-image: none;
}

.a-slider > input[type='range']:disabled::-ms-thumb {
  display: none;
}

.a-slider--disabled > label {
  color: var(--color-moon-200);
  cursor: not-allowed;
}


<|start_filename|>deploy.js<|end_filename|>
const fs = require('fs');
const gh = require('gh-pages');

const DIST_PATH = '.docz/dist';

fs.copyFile('CNAME', `${DIST_PATH}/CNAME`, err => {
  if (err) throw err;
  console.log('CNAME file copied to .docz/dist directory');
});

fs.copyFile(`${DIST_PATH}/index.html`, `${DIST_PATH}/404.html`, err => {
  if (err) throw err;
  console.log('index.html file copied as 404.html');
});

gh.publish(DIST_PATH, err => {
  if (err) {
    console.log('Ops, something went wrong...', err);
  } else {
    console.log('Update site [ci skip]!');
  }
});


<|start_filename|>docs/css/icons-collection.css<|end_filename|>
/* Container */

.icons-collection {
  display: flex;
  margin: -12px -12px 25px;
  flex-wrap: wrap;
}

/* Card */

.icons-collection__card {
  margin: 12px;
  text-align: center;
}

.icons-collection__card-description {
  margin-top: 8px;
  color: var(--color-space-500);
  font: var(--font-primary);
  font-size: 10px;
  font-weight: 400;
}

.icons-collection__card-icon {
  padding: 24px;
  border: 1px solid var(--color-space-400);
  border-radius: 8px;
}

.icons-collection__card-icon .a-icon {
  background-color: var(--color-moon-900);
}


<|start_filename|>src/css/icons.css<|end_filename|>
/* Base */

.a-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: var(--font-size-4base);
  vertical-align: middle;
  background-color: var(--color-moon-900);
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* Sizes */

.a-icon--size-small {
  font-size: var(--font-size-3base);
}

.a-icon--size-medium {
  font-size: var(--font-size-4base);
}

.a-icon--size-large {
  font-size: var(--font-size-5base);
}

/* Spaces */

.a-icon--space-left {
  margin-left: 8px;
}

.a-icon--space-right {
  margin-right: 8px;
}

/* Dashboard icons */

.a-icon--additional {
  mask-image: url(../../assets/icons/additional.svg);
}

.a-icon--chart {
  mask-image: url(../../assets/icons/chart.svg);
}

.a-icon--invite {
  mask-image: url(../../assets/icons/invite.svg);
}

.a-icon--time {
  mask-image: url(../../assets/icons/time.svg);
}

.a-icon--down {
  mask-image: url(../../assets/icons/down.svg);
}

.a-icon--sheet {
  mask-image: url(../../assets/icons/sheet.svg);
}

.a-icon--chat {
  mask-image: url(../../assets/icons/chat.svg);
}

/* Support icons */

.a-icon--alert {
  mask-image: url(../../assets/icons/alert.svg);
}

.a-icon--circle-check {
  mask-image: url(../../assets/icons/circle-check.svg);
}

.a-icon--circle-down {
  mask-image: url(../../assets/icons/circle-down.svg);
}

.a-icon--circle-up {
  mask-image: url(../../assets/icons/circle-up.svg);
}

.a-icon--circle-left {
  mask-image: url(../../assets/icons/circle-left.svg);
}

.a-icon--circle-right {
  mask-image: url(../../assets/icons/circle-right.svg);
}

.a-icon--x-men {
  mask-image: url(../../assets/icons/x-men.svg);
}

.a-icon--copy {
  mask-image: url(../../assets/icons/copy.svg);
}

.a-icon--info {
  mask-image: url(../../assets/icons/info.svg);
}

.a-icon--key {
  mask-image: url(../../assets/icons/key.svg);
}

.a-icon--logout {
  mask-image: url(../../assets/icons/logout.svg);
}

.a-icon--mail {
  mask-image: url(../../assets/icons/mail.svg);
}

.a-icon--menu {
  mask-image: url(../../assets/icons/menu.svg);
}

.a-icon--phone {
  mask-image: url(../../assets/icons/phone.svg);
}

.a-icon--profile {
  mask-image: url(../../assets/icons/profile.svg);
}

.a-icon--clock {
  mask-image: url(../../assets/icons/clock.svg);
}

.a-icon--arrow-down {
  mask-image: url(../../assets/icons/arrow-down.svg);
}

.a-icon--arrow-up {
  mask-image: url(../../assets/icons/arrow-up.svg);
}

.a-icon--arrow-left {
  mask-image: url(../../assets/icons/arrow-left.svg);
}

.a-icon--arrow-right {
  mask-image: url(../../assets/icons/arrow-right.svg);
}

.a-icon--download {
  mask-image: url(../../assets/icons/download.svg);
}

.a-icon--play {
  mask-image: url(../../assets/icons/play.svg);
}

.a-icon--locker {
  mask-image: url(../../assets/icons/locker.svg);
}

.a-icon--magnifier {
  mask-image: url(../../assets/icons/magnifier.svg);
}

.a-icon--sliders {
  mask-image: url(../../assets/icons/sliders.svg);
}

.a-icon--eye-open {
  mask-image: url(../../assets/icons/eye-open.svg);
}

.a-icon--eye-closed {
  mask-image: url(../../assets/icons/eye-closed.svg);
}

.a-icon--pencil {
  mask-image: url(../../assets/icons/pencil.svg);
}

.a-icon--drop-down {
  mask-image: url(../../assets/icons/drop-down.svg);
}

.a-icon--drop-up {
  mask-image: url(../../assets/icons/drop-up.svg);
}

.a-icon--drop-left {
  mask-image: url(../../assets/icons/drop-left.svg);
}

.a-icon--drop-right {
  mask-image: url(../../assets/icons/drop-right.svg);
}

.a-icon--calendar {
  mask-image: url(../../assets/icons/calendar.svg);
}

.a-icon--pizza {
  mask-image: url(../../assets/icons/pizza.svg);
}

.a-icon--circle-mail {
  mask-image: url(../../assets/icons/circle-mail.svg);
}

.a-icon--configuration {
  mask-image: url(../../assets/icons/configuration.svg);
}

.a-icon--balloon {
  mask-image: url(../../assets/icons/balloon.svg);
}

.a-icon--warning {
  mask-image: url(../../assets/icons/warning.svg);
}

.a-icon--photo {
  mask-image: url(../../assets/icons/photo.svg);
}

.a-icon--document {
  mask-image: url(../../assets/icons/document.svg);
}

.a-icon--trash {
  mask-image: url(../../assets/icons/trash.svg);
}

.a-icon--cake {
  mask-image: url(../../assets/icons/cake.svg);
}

.a-icon--laptop {
  mask-image: url(../../assets/icons/laptop.svg);
}

.a-icon--coin {
  mask-image: url(../../assets/icons/coin.svg);
}

.a-icon--cup {
  mask-image: url(../../assets/icons/cup.svg);
}

.a-icon--house {
  mask-image: url(../../assets/icons/house.svg);
}

.a-icon--light {
  mask-image: url(../../assets/icons/light.svg);
}

.a-icon--input-dash {
  mask-image: url(../../assets/icons/input-dash.svg);
}

.a-icon--input-plus {
  mask-image: url(../../assets/icons/input-plus.svg);
}

.a-icon--chart-up {
  mask-image: url(../../assets/icons/chart-up.svg);
}

.a-icon--comparison {
  mask-image: url(../../assets/icons/comparison.svg);
}

.a-icon--flag {
  mask-image: url(../../assets/icons/flag.svg);
}

.a-icon--money-bag {
  mask-image: url(../../assets/icons/money-bag.svg);
}

.a-icon--dollars {
  mask-image: url(../../assets/icons/dollars.svg);
}

.a-icon--circle-less {
  mask-image: url(../../assets/icons/circle-less.svg);
}

.a-icon--circle-more {
  mask-image: url(../../assets/icons/circle-more.svg);
}

.a-icon--floater {
  mask-image: url(../../assets/icons/floater.svg);
}

.a-icon--bank {
  mask-image: url(../../assets/icons/bank.svg);
}

.a-icon--tax {
  mask-image: url(../../assets/icons/tax.svg);
}

.a-icon--calendar-check {
  mask-image: url(../../assets/icons/calendar-check.svg);
}

.a-icon--upload {
  mask-image: url(../../assets/icons/upload.svg);
}

.a-icon--update {
  mask-image: url(../../assets/icons/update.svg);
}

.a-icon--return {
  mask-image: url(../../assets/icons/return.svg);
}

.a-icon--diagonal-left {
  mask-image: url(../../assets/icons/diagonal-left.svg);
}

.a-icon--diagonal-right {
  mask-image: url(../../assets/icons/diagonal-right.svg);
}

.a-icon--gift {
  mask-image: url(../../assets/icons/gift.svg);
}

.a-icon--transactions {
  mask-image: url(../../assets/icons/transactions.svg);
}

.a-icon--heart {
  mask-image: url(../../assets/icons/heart.svg);
}

.a-icon--close {
  mask-image: url(../../assets/icons/close.svg);
}

.a-icon--mountain {
  mask-image: url(../../assets/icons/mountain.svg);
}

.a-icon--airplane {
  mask-image: url(../../assets/icons/airplane.svg);
}

.a-icon--education {
  mask-image: url(../../assets/icons/education.svg);
}

.a-icon--car {
  mask-image: url(../../assets/icons/car.svg);
}


<|start_filename|>docs/css/sketch-link.css<|end_filename|>
.sketch-link {
  margin-bottom: 65px;
}


<|start_filename|>src/css/web-fonts.css<|end_filename|>
/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src:
    local('Lato Regular'),
    local('Lato-Regular'),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff) format('woff'),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.eot?#) format('eot');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src:
    local('Lato Regular'),
    local('Lato-Regular'),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff) format('woff'),
    url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.eot?#) format('eot');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src:
    local('Lato Bold'),
    local('Lato-Bold'),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff) format('woff'),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.eot?#) format('eot');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src:
    local('Lato Bold'),
    local('Lato-Bold'),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff) format('woff'),
    url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.eot?#) format('eot');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src:
    local('Poppins Medium'),
    local('Poppins-Medium'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff) format('woff'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.eot?#) format('eot');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src:
    local('Poppins Medium'),
    local('Poppins-Medium'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff) format('woff'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.eot?#) format('eot');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src:
    local('Poppins SemiBold'),
    local('Poppins-SemiBold'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff) format('woff'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.eot?#) format('eot');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src:
    local('Poppins SemiBold'),
    local('Poppins-SemiBold'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff) format('woff'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.eot?#) format('eot');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src:
    local('Poppins Bold'),
    local('Poppins-Bold'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff) format('woff'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.eot?#) format('eot');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src:
    local('Poppins Bold'),
    local('Poppins-Bold'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff) format('woff'),
    url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.eot?#) format('eot');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


<|start_filename|>src/css/tables.css<|end_filename|>
:root {
  --table-odd-row-color: var(--color-moon-100);
  --table-header-color: var(--color-moon-500);
  --table-row-inactive-color: var(--color-moon-300);
  --table-row-border-radius: 4px;
}

.a-table {
  width: 100%;
  border-collapse: collapse;
}

.a-table th {
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--table-header-color);
  text-align: left;
}

.a-table td {
  padding-top: 24px;
  padding-bottom: 24px;
}

.a-table td:first-child {
  border-top-left-radius: var(--table-row-border-radius);
  border-bottom-left-radius: var(--table-row-border-radius);
}

.a-table td:last-child {
  /*
  Styles for aligning action links/buttons on the last cell of each row,
  can be replaced by implemeting a `button-group` wrapper por multiple buttons.
  */
  display: flex;
  text-align: right;
  justify-content: flex-end;
  border-top-right-radius: var(--table-row-border-radius);
  border-bottom-right-radius: var(--table-row-border-radius);
}

.a-table td:first-child,
.a-table th:first-child {
  padding-left: 32px;
}

.a-table td:last-child,
.a-table th:last-child {
  padding-right: 32px;
}

.a-table tr:nth-child(odd) td {
  background-color: var(--table-odd-row-color);
}

.a-table tr.a-table__row--inactive td {
  color: var(--table-row-inactive-color);
}


<|start_filename|>src/index.css<|end_filename|>
@import '../node_modules/normalize.css/normalize.css';
@import './css/colors.css';
@import './css/gradients.css';
@import './css/z-index.css';
@import './css/fonts.css';
@import './css/icons.css';
@import './css/base.css';
@import './css/typography.css';
@import './css/radio.css';
@import './css/checkbox.css';
@import './css/dropdown.css';
@import './css/buttons.css';
@import './css/toggle.css';
@import './css/inputs.css';
@import './css/slider.css';
@import './css/tables.css';
@import './css/tabs.css';
@import './css/web-fonts.css';


<|start_filename|>docs/theme/index.js<|end_filename|>
const playgroundSelector = '& .Playground__StyledPreviewWrapper-hucttz';
const selectors = {
  wrapper: '& .Page__Wrapper-fZfVLY',
  main: '& .Page__Container-eUbTcM',
  logo: '& .Logo__LogoText-cJLgZg',
  menuArea: '& .Sidebar__Wrapper-dMteFe',
  innerMenuArea: '& .Sidebar__Content-ijXItf',
  menuItem:
    '& .MenuLink__Wrapper-bIIltX > a, & .MenuLink__Wrapper-bIIltX > a.active, & .MenuLink__Wrapper-bIIltX > a:visited',
  menuSubitemsArea: '& .MenuHeadings__Submenu-gcrNS',
  menuSubItem: '& .SmallLink__Link-jgOnXv, & .SmallLink__Link-jgOnXv:visited',
  menuBtn: '& .Hamburger__ToggleButton-hPUXGI',
  menuBtnShape: '& .Hamburger__IconLine-bUJqMY',
  mobileLogoArea: '& .Logo__Wrapper-bzwKYh.kYsbLl',
  mobileMenu: '& .Sidebar__Wrapper-dMteFe',
  playgroundWrapper: playgroundSelector,
  playgroundChildren: `${playgroundSelector} > div`,
  headerTitle: '& .H1-ecIwba',

  /* Docz default elements (hidden) */

  editPageBtn: '& .Page__EditPage-jqcgPa',
  githubBtn: 'a[aria-label="View source on Github"]',
  builtDocz: '& .Sidebar__Footer-eORsBO',
  search: '& .Search__Wrapper-jMtieA',
  menuBlueTop: '& .Logo__Wrapper-bzwKYh:before',
  menuItemsBorder: '& .MenuLink__Wrapper-bIIltX:after',
  menuSubitemsBorder: '& .MenuLink__Wrapper-bIIltX.gUhHxl:after',
  headingIcon: '& .heading--Icon'
};

export default {
  styles: {
    body: `
      overflow: auto;
      line-height: 1.5;

      ${selectors.editPageBtn} {
        display: none;
      }

      ${selectors.githubBtn} {
        display: none;
      }

      ${selectors.builtDocz} {
        display: none;
      }

      ${selectors.search} {
        display: none;
      }

      ${selectors.menuBlueTop} {
        display: none;
      }

      ${selectors.menuItemsBorder} {
        display: none;
      }

      ${selectors.menuSubitemsBorder} {
        display: none;
      }

      ${selectors.headingIcon} {
        display: none;
      }

      ${selectors.wrapper} {
        background-image: var(--gradient-nebulosa);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 312px;
      }

      @media (min-width: 920px) {
        ${selectors.main} {
          width: 90%;
        }
      }

      @media (min-width: 768px) {
        ${selectors.main} {
          padding: 0 40px 40px 90px;
        }
      }

      ${selectors.logo} {
        height: 171px;
        width: 151px;
        margin: 46px 60px;
        background-image: url("/public/astro-logo.svg");
        background-size: 164px;
        background-position: center;
        background-repeat: no-repeat;
        text-indent: -999px;
      }

      & p {
        font: var(--font-secondary);
        color: var(--color-moon-900) !important;
      }

      a {
        color: var(--color-uranus-700);
      }

      ${selectors.menuArea} {
        background-color: var(--color-space-100);
        border-right: 1px solid var(--color-space-300);

        @media (min-width: 1120px) {
          width: 320px;
        }

        ${selectors.innerMenuArea} {
          @media (min-width: 1120px) {
            width: 320px;
          }
        }
      }

      ${selectors.menuItem} {
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-weight: 500;
        color: var(--color-moon-900);
        border-top: 1px solid var(--color-space-300);
        padding: 22px 50px;

        &:hover {
          color: var(--color-moon-300);
          font-weight: 500;
        }

        &::after {
          position: absolute;
          right: 32px;
          width: 32px;
          height: 32px;
          content: '';
          mask-image: url('public/drop-down.svg');
          background-color: var(--color-moon-900);
        }

        &.active::after {
          mask-image: url('public/drop-up.svg');
          background-color: var(--color-moon-900);
        }
      }

      @media (max-width: 1119px) {
        ${selectors.menuItem} {
          padding: 22px 39px;
        }
      }

      ${selectors.menuSubitemsArea} {
        margin: 5px 0 15px;
      }

      ${selectors.menuSubItem} {
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: var(--color-moon-400);
        padding: 6px 50px;
        opacity: 1;

        &:hover {
          color: var(--color-moon-300);
        }

        &.active {
          color: var(--color-moon-900);
        }

        &::before {
          display: none;
        }
      }

      ${selectors.menuBtn} {
        background-color: transparent;

        &::before {
          display: none;
        }
      }

      ${selectors.menuBtnShape} {
        height: 0;
        border: 1px solid var(--color-space-100);
        border-radius: 3px;
        background-color: var(--color-space-100);
      }

      ${selectors.mobileLogoArea} {
        padding: 0;

        &::before {
          display: none;
        }
      }

      ${selectors.mobileMenu} {
        background-color: var(--color-space-100);
      }

      @media (max-width: 560px) {
        ${selectors.headerTitle} {
          font-size: 48px;
        }
      }

      ${selectors.playgroundWrapper} {
        padding: 16px;
        overflow-x: scroll;
      }

      ${selectors.playgroundChildren} {
        & > * {
          box-sizing: border-box;
          margin: 12px;
        }

        & > .a-slider {
          margin-bottom: 22px;
        }

        @media (min-width: 780px) {
          &.md\\:two-columns {
            display: grid;
            grid-template-columns: auto auto;
          }
        }

        &.gradient-bg {
          padding: 16px;
          margin: -16px;
          background-image: var(--gradient-black-hole);
        }
      }
    `,
    h1: `
      font-family: 'Poppins', sans-serif;
      font-size: 64px;
      font-weight: 600;
      letter-spacing: normal;
      color: var(--color-space-100);
      margin: 103px 0 186px;

      ::before {
        display: 'none';
      }
    `,
    h2: `
      font-family: 'Poppins', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: var(--color-moon-500);
      border-bottom: none;
      margin: 0 0 15px;

      & a[href] {
        color: var(--color-uranus-700);
        text-decoration: underline;

        :hover {
          color: var(--color-uranus-500);
        }

        :active {
          color: var(--color-uranus-800);
        }
      }

      &#manifesto, &#get-started {
        font-size: 40px;
        color: var(--color-moon-900);
        margin-top: 64px;
      }
    `,
    h3: `
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--color-moon-500);
    `,
    h4: `
      font-family: 'Lato', sans-serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--color-moon-400);
      margin-bottom: 65px;
    `
  }
};


<|start_filename|>src/css/inputs.css<|end_filename|>
/* General input styles */

.a-input {
  position: relative;
  display: flex;
  flex-direction: column;
}

.a-input > input,
.a-input > textarea {
  width: 100%;
  padding: 25px 16px 5px;
  font: var(--font-secondary);
  color: var(--font-color);
  background-color: var(--color-space-100);
  border: 1px solid var(--color-moon-500);
  border-radius: 8px;
}

.a-input > label {
  position: absolute;
  top: 16px;
  left: 16px;
  font: var(--font-secondary);
  color: var(--color-moon-400);
  pointer-events: none;
  transition: 0.2s ease all;
}

.a-input > input::placeholder {
  color: var(--color-moon-400);
}

/* Messaging inputs */

.a-input--messaging {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.a-input--messaging > input {
  padding: 15px 16px;
  margin-right: 24px;
  flex: 1;
}

/* Ghost inputs */

.a-input--ghost > input,
.a-input.a-input--ghost > input:focus, /* Specificity hack to override focus style */
.a-input--ghost.a-input--validated > input,
.a-input--ghost.a-input--validated > input:focus,
.a-input--ghost.a-input--invalid > input {
  color: var(--color-space-100);
  background-color: transparent;
  border: 1px solid var(--color-space-100);
}

.a-input--ghost > label,
.a-input.a-input--ghost > input:focus + label, /* Specificity hack to override focus style */
.a-input--ghost.a-input > input::placeholder,
.a-input--ghost.a-input--validated > label,
.a-input--ghost.a-input--validated > input:focus + label,
.a-input--ghost.a-input--invalid > label,
.a-input--ghost.a-input > .a-input__error {
  color: var(--color-space-100);
}

.a-input--ghost.a-input--validated:not(.a-input--control)::after,
.a-input--ghost.a-input--invalid:not(.a-input--control)::after {
  background-color: var(--color-space-100);
}

/* Control inputs */

.a-input--control > input {
  appearance: textfield;
  padding-right: 87px;
}

.a-input--control > input::-webkit-inner-spin-button,
.a-input--control > input::-webkit-outer-spin-button {
  appearance: none;
}

/* Control input buttons */

.a-input__btn-control {
  position: absolute;
  top: 16px;
  right: 54px;
  display: inline-block;
  padding: 2px;
  margin: -4px 0 -3px;
  overflow: hidden;
  font: var(--font-primary);
  font-size: var(--font-size-1-5base);
  line-height: 18px;
  color: var(--color-uranus-500);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.a-input__btn-control:focus {
  outline: none;
}

.a-input__btn-control + .a-input__btn-control { /* The first button with this class will be the decrement button. This selects the second button, that will be the increment button */
  right: 15px;
}

.a-input__btn-control:hover:not(:disabled),
.a-input__btn-control:focus:not(:disabled) {
  color: var(--color-uranus-400);
  background-color: var(--color-moon-100);
  border-color: var(--color-moon-100);
}

.a-input__btn-control:active:not(:disabled) {
  color: var(--color-uranus-600);
  background-color: var(--color-moon-200);
  border-color: var(--color-moon-200);
}

.a-input__btn-control:disabled {
  color: var(--color-space-100);
  cursor: not-allowed;
  background-color: transparent;
  border-color: transparent;
}

.a-input__btn-control .a-icon {
  background-color: var(--color-moon-500);
}

.a-input--control > input:focus ~ .a-input__btn-control .a-icon {
  background-color: var(--color-uranus-500);
}

.a-input__btn-control:hover:not(:disabled) .a-icon,
.a-input__btn-control:focus:not(:disabled) .a-icon {
  background-color: var(--color-uranus-400);
}

.a-input__btn-control:active:not(:disabled) .a-icon {
  background-color: var(--color-uranus-600);
}

.a-input--control.a-input--validated > input ~ .a-input__btn-control .a-icon,
.a-input--control.a-input--validated > input ~ .a-input__btn-control:hover .a-icon,
.a-input--control.a-input--validated > input ~ .a-input__btn-control:focus .a-icon {
  background-color: var(--color-earth-400);
}

.a-input--control.a-input--invalid > input ~ .a-input__btn-control .a-icon,
.a-input--control.a-input--invalid > input ~ .a-input__btn-control:hover .a-icon,
.a-input--control.a-input--invalid > input ~ .a-input__btn-control:focus .a-icon {
  background-color: var(--color-mars-400);
}

/* File inputs */

.a-file-preview {
  display: flex;
}

.a-file-preview__item {
  position: relative;
  display: flex;
  width: 80px;
  height: 80px;
  margin-right: 32px;
  vertical-align: middle;
  background-color: var(--color-moon-100);
  border-radius: 4px;
  justify-content: middle;
  align-items: center;
}

.a-file-preview__item img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.a-file-preview__item button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  outline: none;
}

.a-file-preview__item i {
  width: 20px;
  height: 20px;
  margin-left: -1px;
  background-color: var(--color-moon-500);
}

.a-file-preview__item p {
  max-width: 80px;
  padding: 12px;
  margin: 0;
  font-size: calc(var(--font-size-base) * 1.25);
  word-wrap: break-word;
}

.a-file-preview__item p.a-file-preview__item--text-truncate {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Focus state */

.a-input > input:focus,
.a-input > textarea:focus {
  border: 1px solid var(--color-uranus-500);
  outline: none;
}

.a-input > input:focus + label,
.a-input > textarea:focus + label {
  top: 8px;
  font-size: var(--font-size-1-5base);
  font-weight: 700;
  color: var(--color-uranus-500);
}

/* Floating label state */

.a-input > .a-input__label--floating {
  top: 8px;
  font-size: var(--font-size-1-5base);
  font-weight: 700;
}

/* Validated and invalid states */

.a-input--validated > input,
.a-input--invalid > input {
  padding-right: 56px;
}

/* Validated state */

.a-input--validated > input,
.a-input--validated > input:focus {
  border: 1px solid var(--color-earth-400);
}

.a-input--validated > label {
  color: var(--color-moon-400);
}

.a-input--validated > input:focus + label {
  color: var(--color-earth-400);
}

.a-input--validated:not(.a-input--control)::after {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  content: '';
  background-color: var(--color-earth-400);
  mask-image: url('../../assets/icons/circle-check.svg');
}

/* Invalid state */

.a-input--invalid > input,
.a-input--invalid > input:focus {
  border: 1px solid var(--color-mars-500);
}

.a-input--invalid > input:focus + label,
.a-input--invalid > .a-label--invalid {
  color: var(--color-mars-500);
}

.a-input--invalid:not(.a-input--control)::after {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  content: '';
  background-color: var(--color-mars-500);
  mask-image: url('../../assets/icons/alert.svg');
}

/* Error state */

.a-input > .a-input__error {
  position: relative;
  display: block;
  margin: 4px 16px;
  font: var(--font-secondary);
  font-size: var(--font-size-1-5base);
  color: var(--color-mars-500);
}

/* Disabled state */

.a-input--disabled > input:disabled,
.a-input--disabled > textarea:disabled {
  color: var(--color-moon-300);
  cursor: not-allowed;
  background-color: var(--color-moon-100);
  border: 1px solid var(--color-moon-200);
}

.a-input--disabled.a-input--validated::after,
.a-input--disabled.a-input--invalid::after {
  background-color: var(--color-moon-300);
}

.a-input--disabled > input:disabled::placeholder {
  color: var(--color-moon-300);
}

.a-input--disabled > input:disabled + label,
.a-input--disabled > textarea:disabled + label {
  color: var(--color-moon-300);
  cursor: not-allowed;
}

/* Large size */

/* Large: fonts */

.a-input--large > label,
.a-input--large > input {
  font-size: var(--font-size-3base);
}

/* Large: inputs */

.a-input--large > input {
  padding-right: 24px;
  padding-left: 24px;
}

/* Large: labels */

.a-input--large > label {
  left: 24px;
}

.a-input--large .a-input__label--floating,
.a-input--large > input:focus + label {
  top: 6px;
  font-size: var(--font-size-2base);
}

/* Large: validation inputs */

.a-input--large.a-input--validated > input,
.a-input--large.a-input--invalid > input {
  padding-right: 56px;
}

.a-input--large.a-input--validated::after,
.a-input--large.a-input--invalid::after {
  top: 18px;
}

/* Large: control inputs */

.a-input--large.a-input--control > input {
  padding-right: 96px;
}

.a-input--large.a-input--control .a-input__btn-control {
  top: 22px;
}

/* Large: message inputs */

.a-input--large.a-input--messaging .a-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.a-input--large.a-input--messaging .a-icon {
  font-size: var(--font-size-4base);
}


<|start_filename|>docs/js/dropdown.js<|end_filename|>
export const filterDropdown = ({ selector, openedClass, searchURL }) => {
  window.requestAnimationFrame(() => {
    const component = document.querySelector(selector);
    const input = document.querySelector(`${selector} input`);
    const options = document.querySelectorAll(`${selector} ul li a`);
    const icon = document.querySelector(`${selector} span`);

    icon.addEventListener('click', () => {
      if (searchURL) {
        window.location.href = `${searchURL}${input.value}`;
      } else {
        component.classList.toggle(openedClass);
      }
    });

    input.addEventListener('focus', () => {
      component.classList.add(openedClass);
    });

    input.addEventListener('blur', () => {
      setTimeout(() => {
        component.classList.remove(openedClass);
      }, 200);
    });

    input.addEventListener('keyup', () => {
      options.forEach(option => {
        const text = option.innerText;

        if (text.includes(input.value)) {
          option.innerHTML = text.replace(
            new RegExp(input.value, 'g'),
            `<em>${input.value}</em>`
          );
          option.style.display = 'block';
        } else {
          option.innerHTML = text;
          option.style.display = 'none';
        }
      });
    });

    options.forEach(option => {
      option.addEventListener('click', () => {
        input.value = option.innerText;
        component.classList.remove(openedClass);
      });
    });
  });
};

const HandleDropdown = props => {
  filterDropdown(props);
  return null;
};

export default HandleDropdown;


<|start_filename|>src/css/radio.css<|end_filename|>
/* Base component */

:root {
  --radio-circle-size: 18px;
}

.a-radio {
  display: flex;
}

/* Standard input */

.a-radio > input[type='radio'] {
  position: absolute;
  width: var(--radio-circle-size);
  height: var(--radio-circle-size);
  margin-top: 4px;
  cursor: pointer;
  opacity: 0;
  order: 1;
}

/* Label design */

.a-radio > label {
  padding-left: 8px;
  font: var(--font-secondary);
  cursor: pointer;
  order: 2;
}

/* Radio button design */

.a-radio__shape::before {
  display: inline-block;
  width: var(--radio-circle-size);
  height: var(--radio-circle-size);
  margin-top: 4px;
  content: '';
  background-color: var(--color-space-100);
  border: 2px solid var(--color-moon-500);
  border-radius: 100%;
}

/* Middle alignment modifier */

.a-radio--align-middle {
  align-items: center;
}

.a-radio--align-middle > input[type='radio'] {
  margin-top: 0;
}

/* Checked state */

.a-radio > input[type='radio']:checked ~ .a-radio__shape::before {
  border: solid 5px var(--color-uranus-500);
}

/* Disabled state */

.a-radio > input[type='radio']:disabled ~ .a-radio__shape::before {
  cursor: not-allowed;
  border-color: var(--color-moon-200);
}

.a-radio--disabled > label,
.a-radio--disabled > input[type='radio']:disabled,
.a-radio--disabled > input[type='radio']:disabled ~ .a-radio__shape::before {
  color: var(--color-moon-200);
  cursor: not-allowed;
}

.a-radio--disabled > input[type='radio']:disabled ~ .a-radio__shape::before {
  border-color: var(--color-moon-200);
}

/* Focus state */

.a-radio > input[type='radio']:focus ~ .a-radio__shape::before {
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

/* Hover state on */

.a-radio > input[type='radio']:not(:disabled):hover ~ .a-radio__shape::before {
  border-color: var(--color-uranus-500);
}


<|start_filename|>doczrc.js<|end_filename|>
import { css } from 'docz-plugin-css';
import astroTheme from './docs/theme';

export default {
  base: '/',
  src: './docs',
  public: './public',
  plugins: [
    css({
      preprocessor: 'postcss' /* stylelint-disable-line */
    })
  ],
  modifyBabelRc: babelrc => ({
    ...babelrc,
    plugins: [...babelrc.plugins, 'babel-plugin-inline-import']
  }),
  indexHtml: 'public/docz.html',
  htmlContext: {
    favicon: 'public/favicon.png'
  },
  themeConfig: astroTheme,
  menu: [
    'home',
    'colors',
    'buttons',
    'controls & toggles',
    'iconography',
    'inputs',
    'dropdown',
    'typography'
  ],
  codeSandbox: false
};


<|start_filename|>src/css/toggle.css<|end_filename|>
/* Variables */

:root {
  --toggle-base-width: 50px;
  --toggle-base-height: 30px;
  --toggle-circle-size: 28px;
}

/* Base */

.a-toggle {
  position: relative;
  display: inline-block;
}

/* Hide standard input */

.a-toggle > input[type='checkbox'] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-1);
  width: 100%;
  height: var(--toggle-base-height);
  vertical-align: middle;
  cursor: pointer;
  opacity: 0;
}

/* Label */

.a-toggle > label {
  padding-right: 8px;
  font: var(--font-secondary);
}

/* Base */

.a-toggle__shape {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.a-toggle__shape::before {
  display: block;
  width: var(--toggle-base-width);
  height: var(--toggle-base-height);
  content: '';
  background-color: var(--color-moon-400);
  border-radius: var(--toggle-circle-size);
  transition: background-color 0.3s ease;
}

/* Circle */

.a-toggle__shape::after {
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  width: var(--toggle-circle-size);
  height: var(--toggle-circle-size);
  visibility: visible;
  content: '';
  background-color: var(--color-space-100);
  border-radius: var(--toggle-circle-size);
  transition: left 0.3s ease;
}

/* On state */

.a-toggle > input[type='checkbox']:checked ~ .a-toggle__shape::before {
  background-color: var(--color-uranus-500);
}

.a-toggle > input[type='checkbox']:checked ~ .a-toggle__shape::after {
  top: 1px;
  left: 21px;
}

/* Disabled state */

.a-toggle > input[type='checkbox']:disabled ~ .a-toggle__shape::before {
  background-color: var(--color-moon-200);
}

.a-toggle--disabled label,
.a-toggle > input[type='checkbox']:disabled {
  color: var(--color-moon-200);
  cursor: not-allowed;
}

/* Focus state */

.a-toggle > input[type='checkbox']:focus ~ .a-toggle__shape::before {
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

/* Hover state on */

.a-toggle > input[type='checkbox']:not(:disabled):hover ~ .a-toggle__shape::before {
  background-color: var(--color-uranus-400);
}

/* Hover state off */

.a-toggle > input[type='checkbox']:not(:checked):not(:disabled):hover ~ .a-toggle__shape::before {
  background-color: var(--color-moon-300);
}


<|start_filename|>src/css/checkbox.css<|end_filename|>
:root {
  --checkbox-square-size: 16px;
}

.a-checkbox {
  display: flex;
  align-items: center;
}

.a-checkbox > label {
  padding-left: 8px;
  font: var(--font-secondary);
  cursor: pointer;
  order: 2;
}

.a-checkbox--disabled > label {
  color: var(--color-moon-200);
  cursor: not-allowed;
}

.a-checkbox > input[type='checkbox'] {
  position: absolute;
  z-index: var(--z-index-1);
  width: var(--checkbox-square-size);
  height: var(--checkbox-square-size);
  cursor: pointer;
  opacity: 0;
  order: 1;
}

.a-checkbox__shape {
  position: relative;
  line-height: 0;
}

.a-checkbox__shape::before {
  display: inline-block;
  width: var(--checkbox-square-size);
  height: var(--checkbox-square-size);
  content: '';
  border: 2px solid var(--color-moon-500);
  border-radius: 2px;
}

.a-checkbox__shape::after {
  position: absolute;
  top: 4px;
  left: 3px;
  width: 10px;
  height: 6px;
  color: var(--color-space-100);
  content: '';
  border-bottom: 2px solid;
  border-left: 2px solid;
  transform: rotate(-45deg);
}

.a-checkbox--indeterminate > .a-checkbox__shape::after {
  top: 8px;
  left: 4px;
  width: 8px;
  border-left: 0;
  transform: rotate(-180deg);
}

.a-checkbox--indeterminate > input[type='checkbox']:disabled ~ .a-checkbox__shape::before {
  background-color: var(--color-moon-200);
}

.a-checkbox > input[type='checkbox']:focus ~ .a-checkbox__shape::before {
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

.a-checkbox > input[type='checkbox']:checked ~ .a-checkbox__shape::before {
  background-color: var(--color-uranus-500);
  border-color: var(--color-uranus-500);
}

.a-checkbox > input[type='checkbox']:disabled ~ .a-checkbox__shape::before {
  border-color: var(--color-moon-200);
}

.a-checkbox > input[type='checkbox']:checked:disabled ~ .a-checkbox__shape::before {
  background-color: var(--color-moon-200);
}

.a-checkbox > input[type='checkbox']:disabled {
  cursor: not-allowed;
}

.a-checkbox > input[type='checkbox']:hover:not(:disabled) ~ .a-checkbox__shape::before {
  border-color: var(--color-uranus-500);
}


<|start_filename|>docs/css/home.css<|end_filename|>
/* This file contains styles for the homepage only. All other styles are in doczrc.js */

.cards-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cards-box--spaced {
  margin-top: 121px;
}

.cards-box > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-right: 5%;
  width: 100%;
}

.cards-box > div > .cards-box__image {
  display: flex;
  align-items: center;
  height: 154px;
}

@media (min-width: 768px) {

  .cards-box > div {
    width: 50%;
  }
}

@media (min-width: 865px) {

  .cards-box > div {
    width: 30%;
  }
}

.cards-box .a-btn {
  align-self: flex-start;
}

.atomic-illustration {
  width: 153px;
}

.open-illustration {
  width: 172px;
}

.accessible-illustration {
  width: 168px;
}

.flex-1 {
  flex: 1;
}

h3 {
  font: var(--font-primary);
  font-size: 28px;
  color: var(--font-color);
}

ul {
  margin: 0 0 20px;
}

pre,
code {
  font-size: 16px;
  background-color: var(--color-moon-100);
}

.code-snippet {
  overflow-x: scroll;
  background-color: var(--color-moon-100);
  padding: 0 10px;
}


<|start_filename|>src/css/z-index.css<|end_filename|>
:root {
  --z-index-1: 10;
  --z-index-2: 20;
  --z-index-3: 30;
  --z-index-4: 40;
  --z-index-5: 50;
  --z-index-6: 60;
  --z-index-7: 70;
  --z-index-8: 80;
  --z-index-9: 90;
  --z-index-10: 100;
}


<|start_filename|>docs/js/inputs.js<|end_filename|>
import maskInput from 'vanilla-text-mask/dist/vanillaTextMask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

// Currency mask

const currencyMask = createNumberMask({
  prefix: '',
  suffix: '',
  thousandsSeparatorSymbol: '.',
  allowDecimal: true,
  decimalSymbol: ','
});

const pinLabelColors = (inputWrapper, value) => {
  const input = inputWrapper.querySelector('input');
  const label = inputWrapper.querySelector('label');
  value = value || (input && input.value);

  if (
    inputWrapper.classList.contains('a-input--invalid') &&
    value &&
    !label.classList.contains('a-input--invalid')
  ) {
    label.classList.add('a-label--invalid');
  }

  if (label && label.classList.contains('a-label--invalid') && !value) {
    label.classList.remove('a-label--invalid');
  }
};

// Handle floating label

export const initFloatingLabel = () => {
  window.requestAnimationFrame(() => {
    const inputs = document.querySelectorAll('.a-input');

    const verifyValue = (input, label) => {
      if (!label) return;

      if (input.value || input.placeholder) {
        label.classList.add('a-input__label--floating');
      } else {
        label.classList.remove('a-input__label--floating');
      }
    };

    inputs.forEach(input => {
      const currentInput = input.firstChild;
      const currentLabel = input.querySelector('label');

      verifyValue(currentInput, currentLabel);

      currentInput.addEventListener('focus', () => {
        verifyValue(currentInput, currentLabel);
      });

      currentInput.addEventListener('focusout', () => {
        verifyValue(currentInput, currentLabel);
      });

      currentInput.addEventListener('change', () => {
        verifyValue(currentInput, currentLabel);
      });

      currentInput.addEventListener('input', event => {
        pinLabelColors(input, event.target.value);
      });

      pinLabelColors(input);
    });
  });
};

// Handle messaging input button

export const initMessagingInputEvent = () => {
  window.requestAnimationFrame(() => {
    const messagingInputs = document.querySelectorAll('.a-input--messaging');
    handleButtonDisable(messagingInputs);
  });
};

const handleButtonDisable = buttonInputs => {
  const handleFocusEvent = (input, buttons) => {
    input.addEventListener('focus', event => {
      if (!event.target.value) {
        buttons.forEach(button => {
          button.disabled = false;
        });
      }
    });

    input.addEventListener('focusout', event => {
      if (!event.target.value) {
        buttons.forEach(button => {
          button.disabled = true;
        });
      } else {
        buttons.forEach(button => {
          button.disabled = false;
        });
      }
    });
  };

  buttonInputs.forEach(input => {
    const currentButtonInput = input.firstChild;
    const currentButtons = input.querySelectorAll('button');

    currentButtons.forEach(button => {
      if (currentButtonInput.value) button.disabled = false;
    });

    handleFocusEvent(currentButtonInput, currentButtons);

    currentButtonInput.addEventListener('input', event => {
      if (event.target.value) {
        handleFocusEvent(currentButtonInput, currentButtons);
      } else {
        handleFocusEvent(currentButtonInput, currentButtons);
      }
    });
  });
};

// Handle control input buttons

export const initControlInputsEvents = () => {
  window.requestAnimationFrame(() => {
    const controlInputs = document.querySelectorAll('.a-input--control');

    controlInputs.forEach(input => {
      const currentControlInput = input.firstChild;
      const dataStep = parseFloat(
        currentControlInput.getAttribute('data-step')
      );
      const decrementButton = input.querySelector(
        '.a-input__btn-control:nth-of-type(1)'
      );
      const incrementButton = input.querySelector(
        '.a-input__btn-control:nth-of-type(2)'
      );

      const updateControlInputValue = operation => {
        const currentControlInputValue = currentControlInput.value
          ? parseFloat(
              currentControlInput.value.replace(/\./g, '').replace(/\,/g, '.')
            )
          : 0;
        let step = dataStep;

        if (operation === 'decrement') {
          if (currentControlInputValue < dataStep) {
            currentControlInput.value = '0,00';
            return;
          }

          step = dataStep * -1;
        }

        currentControlInput.value = parseFloat(currentControlInputValue + step)
          .toFixed(2)
          .replace(/\./g, ',');

        maskInput({
          inputElement: currentControlInput,
          mask: currencyMask,
          guide: false
        });

        currentControlInput.dispatchEvent(new Event('change'));
      };

      decrementButton.addEventListener('click', () => {
        updateControlInputValue('decrement');
        pinLabelColors(input);
      });

      incrementButton.addEventListener('click', () => {
        updateControlInputValue('increment');
        pinLabelColors(input);
      });
    });
  });
};

// Handle masked inputs

export const initMaskedInputs = () => {
  window.requestAnimationFrame(() => {
    // Date masked inputs
    const dateMaskInputs = document.querySelectorAll(
      '[placeholder="DD/MM/YYYY"]'
    );
    dateMaskInputs.forEach(input => {
      maskInput({
        inputElement: input,
        mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
        guide: false
      });
    });

    // CPF masked input
    const cpfMaskInputs = document.querySelectorAll(
      '[placeholder="000.000.000-00"]'
    );
    cpfMaskInputs.forEach(input => {
      maskInput({
        inputElement: input,
        mask: [
          /\d/,
          /\d/,
          /\d/,
          '.',
          /\d/,
          /\d/,
          /\d/,
          '.',
          /\d/,
          /\d/,
          /\d/,
          '-',
          /\d/,
          /\d/
        ],
        guide: false
      });
    });

    // Currency masked inputs
    const currencyMaskInputs = document.querySelectorAll(
      '[placeholder="0,00"]'
    );
    currencyMaskInputs.forEach(input => {
      maskInput({
        inputElement: input,
        mask: currencyMask,
        guide: false
      });
    });
  });
};

const HandleInputEvents = () => {
  initFloatingLabel();
  initMessagingInputEvent();
  initControlInputsEvents();
  initMaskedInputs();
  return null;
};

export default HandleInputEvents;


<|start_filename|>src/css/typography.css<|end_filename|>
/* Default styles */

.a-text--display,
.a-title--large,
.a-title--medium,
.a-title--small,
.a-text--large,
.a-text--medium,
.a-text--small,
.a-text--very-small {
  font: var(--font-primary);
  color: var(--font-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.a-text--secondary-large,
.a-text--secondary-medium,
.a-text--secondary-small,
.a-text--secondary-very-small {
  font: var(--font-secondary);
  color: var(--font-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display */

.a-text--display {
  font-size: var(--font-size-8base);
  font-weight: 700;
}

/* Title */

.a-title--large {
  font-size: var(--font-size-6base);
}

.a-title--medium {
  font-size: var(--font-size-5base);
}

.a-title--small {
  font-size: var(--font-size-4base);
}

/* Paragraph */

.a-text--large {
  font-size: var(--font-size-3base);
}

.a-text--small {
  font-size: var(--font-size-1-75base);
}

.a-text--very-small {
  font-size: var(--font-size-1-5base);
}

/* Secondary font */

.a-text--secondary-large {
  font-size: var(--font-size-3base);
}

.a-text--secondary-small {
  font-size: var(--font-size-1-75base);
}

.a-text--secondary-very-small {
  font-size: var(--font-size-1-5base);
}


<|start_filename|>.stylelintrc.js<|end_filename|>
const propertyOrder = require('./property-order');

module.exports = {
  extends: 'stylelint-config-standard',
  plugins: ['stylelint-order'],
  rules: {
    'font-family-name-quotes': 'always-unless-keyword',
    'string-quotes': 'single',
    'rule-empty-line-before': 'always',
    'order/properties-order': propertyOrder,
    'no-descending-specificity': null
  }
};


<|start_filename|>docs/css/colors-collection.css<|end_filename|>
/* Container */

.color-palette {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 45px;
}

.gradient-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, 128px);
  grid-gap: 16px;
  margin-top: 35px;
}

/* Color Swatch */

.color-palette__swatch {
  width: 72px;
  height: 72px;
  padding-top: 26px;
  text-align: center;
  font: var(--font-primary);
}

.color-palette__swatch:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.color-palette__swatch:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Gradient Swatch */

.gradient-collection__swatch {
  border-radius: 8px;
  width: 128px;
  height: 128px;
  padding-top: 55px;
  font: var(--font-primary);
  text-align: center;
}
