anephenix/ui

@import './spacing.scss';
@import './colours.scss';

@mixin main($firstColour, $secondColour) {
    background-color: $firstColour;
    border: solid 1px $firstColour;
    color: $secondColour;

    &:hover {
        background-color: $secondColour;
        border: solid 1px $firstColour;
        color: $firstColour;
    }
}

@mixin alternate($firstColour, $secondColour) {
    &.alternate {
        background-color: $secondColour;
        border: solid 1px $firstColour;
        color: $firstColour;

        &:hover {
            background-color: $firstColour;
            border: solid 1px $firstColour;
            color: $secondColour;
        }
    }
}

@mixin generateVariant($className, $firstColour, $secondColour) {
    &.#{$className} {
        @include main($firstColour, $secondColour);
        @include alternate($firstColour, $secondColour);
    }
}

button.theme-default,
.button.theme-default {
    padding: $grid-base $spacer-three;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s linear;
    text-decoration: none;

    @each $colourClassName in map-keys($theme-colours) {
        @include generateVariant(
            $colourClassName,
            map-get($theme-colours, $colourClassName),
            $light
        );
    }
}

@media screen and (prefers-color-scheme: dark) {
    button.theme-default,
    .button.theme-default {
        @each $colourClassName in map-keys($theme-colours) {
            @include generateVariant(
                $colourClassName,
                map-get($theme-colours, $colourClassName),
                $dark
            );
        }
    }
}