// MISCELLANEOUS
.hm-thwhite {
    .hm-description {
        color: var(--hm-thwhite-gray-color);
    }
}

.hm-thblack {
    .hm-description {
        color: var(--hm-thblack-gray-color);
    }
}

// BUTTONS
.hm-button {
    font-size: var(--hm-font-size);
    font-family: var(--hm-font-family);
    padding: var(--hm-element-padding);
    border-radius: var(--hm-element-border-radius);
    transition: var(--hm-transition);
    transition-property: background-color;
    cursor: pointer;
    width: 100%;
    flex: 1;
    display: grid;
    place-items: center;
    border-color: transparent;
    font-weight: bold;
    min-width: max-content;

    // For .hm-secondary see down below

    &.hm-blue {
        background-color: var(--hm-blue-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }

        &:hover {
            background-color: var(--hm-blue-hover-color);
        }
    }

    &.hm-pink {
        background-color: var(--hm-pink-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }

        &:hover {
            background-color: var(--hm-pink-hover-color);
        }
    }

    &.hm-yellow {
        background-color: var(--hm-yellow-color);
        color: var(--hm-font-color-black);

        svg {
            fill: var(--hm-font-color-black);
        }

        &:hover {
            background-color: var(--hm-yellow-hover-color);
        }
    }

    &.hm-green {
        background-color: var(--hm-green-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }

        &:hover {
            background-color: var(--hm-green-hover-color);
        }
    }

    &.hm-red {
        background-color: var(--hm-red-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }

        &:hover {
            background-color: var(--hm-red-hover-color);
        }
    }

    &.hm-purple {
        background-color: var(--hm-purple-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }

        &:hover {
            background-color: var(--hm-purple-hover-color);
        }
    }
}

// Secondary button is reliant on component theme
.hm-thwhite .hm-button.hm-secondary {
    border: var(--hm-thwhite-border);
    background-color: var(--hm-thwhite-section-bg-color);
    color: var(--hm-thwhite-font-color-contrast);

    &:hover {
        background-color: var(--hm-thwhite-section-bg-hover-color);
    }
}

.hm-thblack .hm-button.hm-secondary {
    border: var(--hm-thblack-border);
    background-color: var(--hm-thblack-section-bg-color);
    color: var(--hm-thblack-font-color-contrast);

    &:hover {
        background-color: var(--hm-thblack-section-bg-hover-color);
    }
}

// ICONS
.hm-icon-container {
    font-size: var(--hm-text-font-size);
    padding: var(--hm-element-padding);
    align-self: stretch;
    border-radius: var(--hm-element-border-radius);

    display: grid;
    place-items: center;

    // For .hm-secondary see down below

    &.hm-blue {
        background-color: var(--hm-blue-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }
    }

    &.hm-pink {
        background-color: var(--hm-pink-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }
    }

    &.hm-yellow {
        background-color: var(--hm-yellow-color);
        color: var(--hm-font-color-black);

        svg {
            fill: var(--hm-font-color-black);
        }
    }

    &.hm-green {
        background-color: var(--hm-green-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }
    }

    &.hm-red {
        background-color: var(--hm-red-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }
    }

    &.hm-purple {
        background-color: var(--hm-purple-color);
        color: var(--hm-font-color-white);

        svg {
            fill: var(--hm-font-color-white);
        }
    }
}

// Secondary iconContainer is reliant on component theme
.hm-thwhite .hm-icon-container.hm-secondary {
    &.hm-secondary {
        background-color: var(--hm-thwhite-gray-color-3);
        color: var(--hm-thwhite-font-color-contrast);

        svg {
            fill: var(--hm-thwhite-font-color-contrast);
        }
    }
}

.hm-thblack .hm-icon-container.hm-secondary {
    &.hm-secondary {
        background-color: var(--hm-thblack-gray-color-3);
        color: var(--hm-thblack-font-color-contrast);

        svg {
            fill: var(--hm-thblack-font-color-contrast);
        }
    }
}

// VARIABLES
:root {
    --hm-font-family: Arial, Helvetica, sans-serif;
    --hm-margin: 18px 0;
    --hm-section-border-radius: 15px;
    --hm-element-border-radius: 8px;
    --hm-flex-gap: 10px;
    --hm-transition: none 0.2s ease-in-out;

    --hm-font-color-white: white;
    --hm-font-color-black: hsl(210, 29%, 24%);

    --hm-component-shadow: 0 0 20px 7px var(--hm-component-shadow-color);

    --hm-thwhite-alerticon-shadow: 0 0 20px 7px var(--hm-thwhite-alerticon-shadow-color);
    --hm-thblack-alerticon-shadow: 0 0 20px 7px var(--hm-thblack-alerticon-shadow-color);

    --hm-thwhite-border: 2px solid var(--hm-thwhite-border-color);
    --hm-thblack-border: 2px solid var(--hm-thblack-border-color);
}

@media only screen and (min-width: 601px) {
    :root {
        --hm-font-size: 17px;
        --hm-text-font-size: 19px;
        --hm-description-font-size: 14px;
        --hm-section-padding: 10px;
        --hm-element-padding: 6px;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --hm-font-size: 15px;
        --hm-text-font-size: 18px; // TODO
        --hm-description-font-size: 13px;
        --hm-section-padding: 7px;
        --hm-element-padding: 5px;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --hm-blue-color: hsl(222, 100%, 61%);
        --hm-blue-hover-color: hsl(222, 100%, 53%);

        --hm-pink-color: hsl(340, 82%, 49%);
        --hm-pink-hover-color: hsl(340, 82%, 43%);

        --hm-yellow-color: hsl(44, 97%, 50%);
        --hm-yellow-hover-color: hsl(44, 97%, 46%);

        --hm-green-color: hsl(116, 45%, 54%);
        --hm-green-hover-color: hsl(116, 45%, 46%);

        --hm-red-color: hsl(0, 76%, 58%);
        --hm-red-hover-color: hsl(0, 76%, 50%);

        --hm-purple-color: hsl(321, 62%, 46%);
        --hm-purple-hover-color: hsl(321, 62%, 40%);

        --hm-darken-color: hsla(240, 8%, 7%, 0.448);
        --hm-component-shadow-color: hsla(0, 0%, 41%, 0.17);

        --hm-thwhite-alerticon-shadow-color: hsla(0, 0%, 41%, 0.17);
        --hm-thblack-alerticon-shadow-color: hsla(0, 0%, 9%, 0.12);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --hm-blue-color: hsl(222, 100%, 61%);
        --hm-blue-hover-color: hsl(222, 100%, 53%);

        --hm-pink-color: hsl(340, 82%, 49%);
        --hm-pink-hover-color: hsl(340, 82%, 43%);

        --hm-yellow-color: hsl(44, 97%, 50%);
        --hm-yellow-hover-color: hsl(44, 97%, 40%);

        --hm-green-color: hsl(116, 45%, 54%);
        --hm-green-hover-color: hsl(116, 45%, 46%);

        --hm-red-color: hsl(0, 76%, 58%);
        --hm-red-hover-color: hsl(0, 76%, 50%);

        --hm-purple-color: hsl(321, 62%, 46%);
        --hm-purple-hover-color: hsl(321, 62%, 40%);

        --hm-darken-color: hsla(0, 0%, 0%, 0.85);
        --hm-component-shadow-color: hsla(0, 0%, 4%, 0.5);

        --hm-thwhite-alerticon-shadow-color: hsla(0, 0%, 9%, 0.2);
        --hm-thblack-alerticon-shadow-color: hsla(0, 0%, 9%, 0.5);
    }
}

// VARIABLES -> THEME: White
:root {
    --hm-thwhite-font-color-contrast: var(--hm-font-color-black);
    --hm-thwhite-font-color-match: var(--hm-font-color-white);

    --hm-thwhite-section-bg-color: white;
    --hm-thwhite-section-bg-hover-color: hsl(0, 0%, 96%);

    --hm-thwhite-border-color: hsl(231, 9%, 84%);

    --hm-thwhite-gray-color: hsl(208, 7%, 46%);
    --hm-thwhite-gray-color-3: hsl(210, 17%, 97.5%);

    // alerticon-shadow if dependent on user color scheme
}

// VARIABLES -> THEME: Black
:root {
    --hm-thblack-font-color-contrast: var(--hm-font-color-white);
    --hm-thblack-font-color-match: var(--hm-font-color-black);

    --hm-thblack-section-bg-color: hsl(210, 11%, 11%);
    --hm-thblack-section-bg-hover-color: hsl(210, 11%, 13%);

    --hm-thblack-border-color: hsl(210, 11%, 23%);

    --hm-thblack-gray-color: hsl(208, 7%, 46%);
    --hm-thblack-gray-color-3: hsl(207, 11%, 9%);

    // alerticon-shadow if dependent on user color scheme
}