.color-group {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
    margin-bottom: 35px;
}

.color-chip {
    padding: 20px 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    color: white;
}

.color-hex {
    opacity: 0.5;
    text-align: right;

    &::before {
        content: "#";
    }
}

#gray-100 {
    background: $gray-100;
    color: $gray-900;
}

#gray-200 {
    background: $gray-200;
    color: $gray-900;
}

#gray-300 {
    background: $gray-300;
    color: $gray-900;
}

#gray-400 {
    background: $gray-400;
    color: $gray-900;
}

#gray-500 {
    background: $gray-500;
    color: $gray-900;
}

#gray-600 {
    background: $gray-600;
}

#gray-700 {
    background: $gray-700;
}

#gray-800 {
    background: $gray-800;
}

#gray-900 {
    background: $gray-900;
}

#blue {
    background: $blue;
}

#indigo {
    background: $indigo;
}

#purple {
    background: $purple;
}

#pink {
    background: $pink;
}

#red {
    background: $red;
}

#orange {
    background: $orange;
}

#yellow {
    background: $yellow;
}

#green {
    background: $green;
}

#teal {
    background: $teal;
}

#cyan {
    background: $cyan;
}

#sky-blue {
    background: $sky-blue;
}

#midnight-1 {
    background: $midnight-1;
}

#midnight-2 {
    background: $midnight-2;
}

#midnight-3 {
    background: $midnight-3;
}

#midnight-4 {
    background: $midnight-4;
}

#midnight-5 {
    background: $midnight-5;
}

#midnight-6 {
    background: $midnight-6;
}

#midnight-7 {
    background: $midnight-7;
}

#midnight-8 {
    background: $midnight-8;
}

#midnight-9 {
    background: $midnight-9;
}

#dataviz-1 {
    background: $dataviz-1;
}

#dataviz-2 {
    background: $dataviz-2;
}

#dataviz-3 {
    background: $dataviz-3;
}

#dataviz-4 {
    background: $dataviz-4;
}