@import "variables";

.colors {
  display: flex;
  flex-flow: row wrap;
  .color {
    width: 15rem;
    &:before {
      content: "✓";
      display: inline-flex;
      border-radius: 50%;
      width: 3rem;
      height: 3rem;
      font-weight: $fw-bold;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 1.5rem 0.5rem darkgray;
      margin: (1rem * 1.6);
    }
  }
  .bg:before {
    background-color: $col-bg;
    color: $col-text;
  }
  .hdr:before {
    background-color: $header-bg;
    color: $header-color;
  }
  .foot:before {
    background-color: $footer-bg;
    color: $footer-color;
  }
  .prm {
    &:before {
      background-color: $col-prm;
      color: $col-prm-c;
    }
    &.light:before {
      background-color: $col-prm-l;
      color: $col-prm-l-c;
    }
    &.dark:before {
      background-color: $col-prm-d;
      color: $col-prm-d-c;
    }
  }
  .sec {
    &:before {
      background-color: $col-sec;
      color: $col-sec-c;
    }
    &.dark:before {
      background-color: $col-sec-d;
      color: $col-sec-d-c;
    }
    &.light:before {
      background-color: $col-sec-l;
      color: $col-sec-l-c;
    }
  }
  .danger {
    &:before {
      background-color: $col-danger;
    }
  }
  .success {
    &:before {
      background-color: $col-success;
    }
  }
  .warn {
    &:before {
      background-color: $col-warn;
    }
  }
  .g0:before {
    background-color: $white;
  }
  .g1:before {
    background-color: $gray100;
  }
  .g2:before {
    background-color: $gray200;
  }
  .g3:before {
    background-color: $gray300;
  }
  .g4:before {
    background-color: $gray400;
  }
  .g5:before {
    background-color: $gray500;
  }
  .g6:before {
    background-color: $gray600;
  }
  .g7:before {
    background-color: $gray700;
  }
  .g8:before {
    background-color: $gray800;
  }
  .g9:before {
    background-color: $gray900;
  }
  .g10:before {
    background-color: $black;
  }
}

.group {
  display: flex;
  flex-direction: column;
  padding-bottom: 1em;
}

.gutenberg-blocks {
  h3 {
    margin-bottom: $space-sm;
  }
  margin: $space-md 0 $space-lg;
  .components-list {
    max-height: 300px;
    overflow: auto;
    background-color: $black;
    border-radius: 1.6rem;
    padding: $space-xs;
    color: $white;
  }
}
