@import "./variables";

%clickable {
    cursor: pointer;
    transition: background-color 250ms ease-out;

    &:hover,
    &:focus {
        background-color: $color-hover-cd;
        outline: none;
    }
}

%clickable-light {
    cursor: pointer;
    transition: opacity 250ms ease-out;

    &:hover,
    &:focus {
        opacity: $color-hover-dc;
        outline: none;
    }
}

%active {
    background-color: $color-active;
    color: $color-active-font;

    &:hover,
    &:focus {
        background-color: $color-active;
        color: $color-active-font;
    }
}