.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 {
  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(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
  transition-delay: 0s;
}

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

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

.theme-preset-accent {
  z-index: 5;
  clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
  transition-delay: var(--layout-duration-02);
}

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

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

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

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

.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-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-background-bluegum-01 {
  background-color: rgb(var(--theme-preset-background-bluegum-01))
}

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

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

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

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

.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-background-snowblue-01 {
  background-color: rgb(var(--theme-preset-background-snowblue-01))
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-background-steelgrey-01 {
  background-color: rgb(var(--theme-preset-background-steelgrey-01))
}

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

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

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

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

.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-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-background-whoosh-01 {
  background-color: rgb(var(--theme-preset-background-whoosh-01))
}

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

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

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

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