@mixin size($width, $height) {
    @if $width {
        width: $width;
    }

    @if $height {
        height: $height;
    }
}

@mixin pos($top, $right, $bottom, $left) {
    @if $top {
        top: $top;
    }

    @if $right {
        right: $right;
    }

    @if $bottom {
        bottom: $bottom;
    }

    @if $left {
        left: $left;
    }
}

%wh-100 {
    @include size(100%, 100%);
}

%pos-top-left-0 {
    @include pos(0, null, null, 0);
}

%pos-bottom-left-0 {
    @include pos(0, null, 0, null);
}

%button-bg {
    background-color: $button-color;

    &.active, &:hover {
        background-color: $button-hover;
    }
}

%cursor-pointer {
    cursor: pointer;
}


.fadeIn {
    animation-name: fadeIn;
    animation-duration: 500ms;
}

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}