@import (reference) './dark-theme.less';

.flex-center () {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.frame-small () {
    padding: @padding-small;
    margin: @margin-small;
}

.frame-medium () {
    padding: @padding-medium;
    margin: @margin-medium;
}

.heading (@selector, @size, @color: @title-color) {
    @{selector} {
        text-align: center;
        font-size: @size;
        font-weight: bold;
        color: @color;
        @media @mobile {
            font-size: @size / 1.5;
        }
        @media @tablet {
            font-size: @size / 1.5;
        }
    }
}

.label (@background: @label-theme, @text: @label-text, @border: @label-border) {
    background-color: @background;
    color: @text;
    border: @border;
    margin: @margin-small;
    padding: @padding-small / 2 @padding-medium;
    box-shadow: @label-box-shadow;
}

.label-hover (@background: @label-hover, @text: @label-hover-text, @border: @label-border) {
    transition: @transition-time background-color;
    &:hover {
        .label(@background, @text, @border);
    }
}

