.theme-preset-button {
  padding: 0;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  max-width: var(--theme-preset-preview-size);
}

.theme-preset-button .button-text {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  margin-left: 0;
}

.theme-preset-button:after {
  content: none;
}

.theme-preset-preview {
  width: var(--theme-preset-preview-size);
  height: var(--theme-preset-preview-size);
  position: relative;
}

.theme-preset-background-01,
.theme-preset-background-02,
.theme-preset-background-03,
.theme-preset-background-04,
.theme-preset-accent,
.theme-preset-font {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transition: clip-path var(--layout-timing-extra-fast);
}

.theme-preset-background-01 {
  z-index: 1;
}

.theme-preset-background-02 {
  z-index: 2;
  clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%);
  transition-delay: 0s;
}

.theme-preset-background-03 {
  z-index: 3;
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
  transition-delay: 0s;
}

.theme-preset-background-04 {
  z-index: 4;
  clip-path: polygon(100% 30%, 100% 100%, 30% 100%);
  transition-delay: 0s;
}

.theme-preset-accent {
  clip-path: circle(20% at 100% 100%);
  z-index: 5;
}

.theme-preset-font {
  padding: 0.25em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  white-space: initial;
  transition: transform var(--layout-timing-extra-fast);
  z-index: 6;
}

.theme-preset-font-display {
  font-size: 1em;
  margin-bottom: 0.25em;
}

.theme-preset-font-ui {
  font-size: 0.8em;
}

.theme-preset-button:focus .theme-preset-background-02,
.theme-preset-button:hover .theme-preset-background-02 {
  clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 60%);
  transition-delay: var(--layout-duration-01);
}

.theme-preset-button:focus .theme-preset-background-03,
.theme-preset-button:hover .theme-preset-background-03 {
  clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 90%);
  transition-delay: var(--layout-duration-02);
}

.theme-preset-button:focus .theme-preset-background-04,
.theme-preset-button:hover .theme-preset-background-04 {
  clip-path: polygon(100% 20%, 100% 100%, 20% 100%);
  transition-delay: var(--layout-duration-03);
}

.theme-preset-button:focus .theme-preset-accent,
.theme-preset-button:hover .theme-preset-accent {
  clip-path: circle(30% at 100% 100%);
  transition-delay: var(--layout-duration-04);
}

.theme-preset-button:hover .theme-preset-font,
.theme-preset-button:focus .theme-preset-font {
  transform: scale(1.1);
}

.theme-preset-background-nighttab-01 {
  background-color: rgb(var(--theme-preset-background-nighttab-01));
}

.theme-preset-background-nighttab-02 {
  background-color: rgb(var(--theme-preset-background-nighttab-02));
}

.theme-preset-background-nighttab-03 {
  background-color: rgb(var(--theme-preset-background-nighttab-03));
}

.theme-preset-background-nighttab-04 {
  background-color: rgb(var(--theme-preset-background-nighttab-04));
}

.theme-preset-accent-nighttab {
  background-color: rgb(var(--theme-preset-accent-nighttab));
}

.theme-preset-font-display-nighttab {
  font-family: var(--theme-preset-font-display-nighttab);
  color: rgb(var(--theme-preset-font-color-nighttab));
}

.theme-preset-font-ui-nighttab {
  font-family: var(--theme-preset-font-ui-nighttab);
  color: rgb(var(--theme-preset-font-color-nighttab));
}

.theme-preset-background-midnight-01 {
  background-color: rgb(var(--theme-preset-background-midnight-01));
}

.theme-preset-background-midnight-02 {
  background-color: rgb(var(--theme-preset-background-midnight-02));
}

.theme-preset-background-midnight-03 {
  background-color: rgb(var(--theme-preset-background-midnight-03));
}

.theme-preset-background-midnight-04 {
  background-color: rgb(var(--theme-preset-background-midnight-04));
}

.theme-preset-accent-midnight {
  background-color: rgb(var(--theme-preset-accent-midnight));
}

.theme-preset-font-display-midnight {
  font-family: var(--theme-preset-font-display-midnight);
  color: rgb(var(--theme-preset-font-color-midnight));
}

.theme-preset-font-ui-midnight {
  font-family: var(--theme-preset-font-ui-midnight);
  color: rgb(var(--theme-preset-font-color-midnight));
}

.theme-preset-background-pym-01 {
  background-color: rgb(var(--theme-preset-background-pym-01));
}

.theme-preset-background-pym-02 {
  background-color: rgb(var(--theme-preset-background-pym-02));
}

.theme-preset-background-pym-03 {
  background-color: rgb(var(--theme-preset-background-pym-03));
}

.theme-preset-background-pym-04 {
  background-color: rgb(var(--theme-preset-background-pym-04));
}

.theme-preset-accent-pym {
  background-color: rgb(var(--theme-preset-accent-pym));
}

.theme-preset-font-display-pym {
  font-family: var(--theme-preset-font-display-pym);
  color: rgb(var(--theme-preset-font-color-pym));
}

.theme-preset-font-ui-pym {
  font-family: var(--theme-preset-font-ui-pym);
  color: rgb(var(--theme-preset-font-color-pym));
}

.theme-preset-background-cruiser-01 {
  background-color: rgb(var(--theme-preset-background-cruiser-01));
}

.theme-preset-background-cruiser-02 {
  background-color: rgb(var(--theme-preset-background-cruiser-02));
}

.theme-preset-background-cruiser-03 {
  background-color: rgb(var(--theme-preset-background-cruiser-03));
}

.theme-preset-background-cruiser-04 {
  background-color: rgb(var(--theme-preset-background-cruiser-04));
}

.theme-preset-accent-cruiser {
  background-color: rgb(var(--theme-preset-accent-cruiser));
}

.theme-preset-font-display-cruiser {
  font-family: var(--theme-preset-font-display-cruiser);
  color: rgb(var(--theme-preset-font-color-cruiser));
}

.theme-preset-font-ui-cruiser {
  font-family: var(--theme-preset-font-ui-cruiser);
  color: rgb(var(--theme-preset-font-color-cruiser));
}

.theme-preset-background-sharpmint-01 {
  background-color: rgb(var(--theme-preset-background-sharpmint-01));
}

.theme-preset-background-sharpmint-02 {
  background-color: rgb(var(--theme-preset-background-sharpmint-02));
}

.theme-preset-background-sharpmint-03 {
  background-color: rgb(var(--theme-preset-background-sharpmint-03));
}

.theme-preset-background-sharpmint-04 {
  background-color: rgb(var(--theme-preset-background-sharpmint-04));
}

.theme-preset-accent-sharpmint {
  background-color: rgb(var(--theme-preset-accent-sharpmint));
}

.theme-preset-font-display-sharpmint {
  font-family: var(--theme-preset-font-display-sharpmint);
  color: rgb(var(--theme-preset-font-color-sharpmint));
}

.theme-preset-font-ui-sharpmint {
  font-family: var(--theme-preset-font-ui-sharpmint);
  color: rgb(var(--theme-preset-font-color-sharpmint));
}

.theme-preset-background-snowglow-01 {
  background-color: rgb(var(--theme-preset-background-snowglow-01));
}

.theme-preset-background-snowglow-02 {
  background-color: rgb(var(--theme-preset-background-snowglow-02));
}

.theme-preset-background-snowglow-03 {
  background-color: rgb(var(--theme-preset-background-snowglow-03));
}

.theme-preset-background-snowglow-04 {
  background-color: rgb(var(--theme-preset-background-snowglow-04));
}

.theme-preset-accent-snowglow {
  background-color: rgb(var(--theme-preset-accent-snowglow));
}

.theme-preset-font-display-snowglow {
  font-family: var(--theme-preset-font-display-snowglow);
  color: rgb(var(--theme-preset-font-color-snowglow));
}

.theme-preset-font-ui-snowglow {
  font-family: var(--theme-preset-font-ui-snowglow);
  color: rgb(var(--theme-preset-font-color-snowglow));
}

.theme-preset-background-rumble-01 {
  background-color: rgb(var(--theme-preset-background-rumble-01));
}

.theme-preset-background-rumble-02 {
  background-color: rgb(var(--theme-preset-background-rumble-02));
}

.theme-preset-background-rumble-03 {
  background-color: rgb(var(--theme-preset-background-rumble-03));
}

.theme-preset-background-rumble-04 {
  background-color: rgb(var(--theme-preset-background-rumble-04));
}

.theme-preset-accent-rumble {
  background-color: rgb(var(--theme-preset-accent-rumble));
}

.theme-preset-font-display-rumble {
  font-family: var(--theme-preset-font-display-rumble);
  color: rgb(var(--theme-preset-font-color-rumble));
}

.theme-preset-font-ui-rumble {
  font-family: var(--theme-preset-font-ui-rumble);
  color: rgb(var(--theme-preset-font-color-rumble));
}

.theme-preset-background-sollight-01 {
  background-color: rgb(var(--theme-preset-background-sollight-01));
}

.theme-preset-background-sollight-02 {
  background-color: rgb(var(--theme-preset-background-sollight-02));
}

.theme-preset-background-sollight-03 {
  background-color: rgb(var(--theme-preset-background-sollight-03));
}

.theme-preset-background-sollight-04 {
  background-color: rgb(var(--theme-preset-background-sollight-04));
}

.theme-preset-accent-sollight {
  background-color: rgb(var(--theme-preset-accent-sollight));
}

.theme-preset-font-display-sollight {
  font-family: var(--theme-preset-font-display-sollight);
  color: rgb(var(--theme-preset-font-color-sollight));
}

.theme-preset-font-ui-sollight {
  font-family: var(--theme-preset-font-ui-sollight);
  color: rgb(var(--theme-preset-font-color-sollight));
}

.theme-preset-background-artdeco-01 {
  background-color: rgb(var(--theme-preset-background-artdeco-01));
}

.theme-preset-background-artdeco-02 {
  background-color: rgb(var(--theme-preset-background-artdeco-02));
}

.theme-preset-background-artdeco-03 {
  background-color: rgb(var(--theme-preset-background-artdeco-03));
}

.theme-preset-background-artdeco-04 {
  background-color: rgb(var(--theme-preset-background-artdeco-04));
}

.theme-preset-accent-artdeco {
  background-color: rgb(var(--theme-preset-accent-artdeco));
}

.theme-preset-font-display-artdeco {
  font-family: var(--theme-preset-font-display-artdeco);
  color: rgb(var(--theme-preset-font-color-artdeco));
}

.theme-preset-font-ui-artdeco {
  font-family: var(--theme-preset-font-ui-artdeco);
  color: rgb(var(--theme-preset-font-color-artdeco));
}

.theme-preset-background-macaroon-01 {
  background-color: rgb(var(--theme-preset-background-macaroon-01));
}

.theme-preset-background-macaroon-02 {
  background-color: rgb(var(--theme-preset-background-macaroon-02));
}

.theme-preset-background-macaroon-03 {
  background-color: rgb(var(--theme-preset-background-macaroon-03));
}

.theme-preset-background-macaroon-04 {
  background-color: rgb(var(--theme-preset-background-macaroon-04));
}

.theme-preset-accent-macaroon {
  background-color: rgb(var(--theme-preset-accent-macaroon));
}

.theme-preset-font-display-macaroon {
  font-family: var(--theme-preset-font-display-macaroon);
  color: rgb(var(--theme-preset-font-color-macaroon));
}

.theme-preset-font-ui-macaroon {
  font-family: var(--theme-preset-font-ui-macaroon);
  color: rgb(var(--theme-preset-font-color-macaroon));
}

.theme-preset-background-hotpepper-01 {
  background-color: rgb(var(--theme-preset-background-hotpepper-01));
}

.theme-preset-background-hotpepper-02 {
  background-color: rgb(var(--theme-preset-background-hotpepper-02));
}

.theme-preset-background-hotpepper-03 {
  background-color: rgb(var(--theme-preset-background-hotpepper-03));
}

.theme-preset-background-hotpepper-04 {
  background-color: rgb(var(--theme-preset-background-hotpepper-04));
}

.theme-preset-accent-hotpepper {
  background-color: rgb(var(--theme-preset-accent-hotpepper));
}

.theme-preset-font-display-hotpepper {
  font-family: var(--theme-preset-font-display-hotpepper);
  color: rgb(var(--theme-preset-font-color-hotpepper));
}

.theme-preset-font-ui-hotpepper {
  font-family: var(--theme-preset-font-ui-hotpepper);
  color: rgb(var(--theme-preset-font-color-hotpepper));
}

.theme-preset-background-steel-01 {
  background-color: rgb(var(--theme-preset-background-steel-01));
}

.theme-preset-background-steel-02 {
  background-color: rgb(var(--theme-preset-background-steel-02));
}

.theme-preset-background-steel-03 {
  background-color: rgb(var(--theme-preset-background-steel-03));
}

.theme-preset-background-steel-04 {
  background-color: rgb(var(--theme-preset-background-steel-04));
}

.theme-preset-accent-steel {
  background-color: rgb(var(--theme-preset-accent-steel));
}

.theme-preset-font-display-steel {
  font-family: var(--theme-preset-font-display-steel);
  color: rgb(var(--theme-preset-font-color-steel));
}

.theme-preset-font-ui-steel {
  font-family: var(--theme-preset-font-ui-steel);
  color: rgb(var(--theme-preset-font-color-steel));
}

.theme-preset-background-outrun-01 {
  background-color: rgb(var(--theme-preset-background-outrun-01));
}

.theme-preset-background-outrun-02 {
  background-color: rgb(var(--theme-preset-background-outrun-02));
}

.theme-preset-background-outrun-03 {
  background-color: rgb(var(--theme-preset-background-outrun-03));
}

.theme-preset-background-outrun-04 {
  background-color: rgb(var(--theme-preset-background-outrun-04));
}

.theme-preset-accent-outrun {
  background-color: rgb(var(--theme-preset-accent-outrun));
}

.theme-preset-font-display-outrun {
  font-family: var(--theme-preset-font-display-outrun);
  color: rgb(var(--theme-preset-font-color-outrun));
}

.theme-preset-font-ui-outrun {
  font-family: var(--theme-preset-font-ui-outrun);
  color: rgb(var(--theme-preset-font-color-outrun));
}

.theme-preset-background-pumpkin-01 {
  background-color: rgb(var(--theme-preset-background-pumpkin-01));
}

.theme-preset-background-pumpkin-02 {
  background-color: rgb(var(--theme-preset-background-pumpkin-02));
}

.theme-preset-background-pumpkin-03 {
  background-color: rgb(var(--theme-preset-background-pumpkin-03));
}

.theme-preset-background-pumpkin-04 {
  background-color: rgb(var(--theme-preset-background-pumpkin-04));
}

.theme-preset-accent-pumpkin {
  background-color: rgb(var(--theme-preset-accent-pumpkin));
}

.theme-preset-font-display-pumpkin {
  font-family: var(--theme-preset-font-display-pumpkin);
  color: rgb(var(--theme-preset-font-color-pumpkin));
}

.theme-preset-font-ui-pumpkin {
  font-family: var(--theme-preset-font-ui-pumpkin);
  color: rgb(var(--theme-preset-font-color-pumpkin));
}

.theme-preset-background-bubblegum-01 {
  background-color: rgb(var(--theme-preset-background-bubblegum-01));
}

.theme-preset-background-bubblegum-02 {
  background-color: rgb(var(--theme-preset-background-bubblegum-02));
}

.theme-preset-background-bubblegum-03 {
  background-color: rgb(var(--theme-preset-background-bubblegum-03));
}

.theme-preset-background-bubblegum-04 {
  background-color: rgb(var(--theme-preset-background-bubblegum-04));
}

.theme-preset-accent-bubblegum {
  background-color: rgb(var(--theme-preset-accent-bubblegum));
}

.theme-preset-font-display-bubblegum {
  font-family: var(--theme-preset-font-display-bubblegum);
  color: rgb(var(--theme-preset-font-color-bubblegum));
}

.theme-preset-font-ui-bubblegum {
  font-family: var(--theme-preset-font-ui-bubblegum);
  color: rgb(var(--theme-preset-font-color-bubblegum));
}

.theme-preset-background-elderbean-01 {
  background-color: rgb(var(--theme-preset-background-elderbean-01));
}

.theme-preset-background-elderbean-02 {
  background-color: rgb(var(--theme-preset-background-elderbean-02));
}

.theme-preset-background-elderbean-03 {
  background-color: rgb(var(--theme-preset-background-elderbean-03));
}

.theme-preset-background-elderbean-04 {
  background-color: rgb(var(--theme-preset-background-elderbean-04));
}

.theme-preset-accent-elderbean {
  background-color: rgb(var(--theme-preset-accent-elderbean));
}

.theme-preset-font-display-elderbean {
  font-family: var(--theme-preset-font-display-elderbean);
  color: rgb(var(--theme-preset-font-color-elderbean));
}

.theme-preset-font-ui-elderbean {
  font-family: var(--theme-preset-font-ui-elderbean);
  color: rgb(var(--theme-preset-font-color-elderbean));
}