// Misc
//
//
// Styleguide zMisc

// Clickable links
//
// <code class="block">@mixin clickable</code>
// <code class="block">@mixin link</code>
// <ul>
// <li>.clickable: changes the cursor</li>
// <li>.link: turns text into a link</li>
// </ul>
//
// Markup:
// <div class="bg-red w32 h32 clickable"></div>
// <p class="link">This is a regular paragraph</p>
//
//
// Styleguide zMisc.clickable
@mixin clickable() {
    cursor: pointer;
}
@mixin link() {
    display: inline-block;
    cursor: pointer;
    color: color(blue);
    text-decoration: underline;
}

.clickable {
    @include clickable();
}
.link {
    @include link();
}

// Not-allowed
//
// <code class="block">@mixin not-allowed</code>
// Use this class to make interaction with elements not-allowed
//
// Markup:
// <div class="not-allowed bg-red w32 h32"></div>
// <p class="not-allowed">This is a regular paragraph</p>
//
//
// Styleguide zMisc.noclick
@mixin not-allowed() {
    cursor: not-allowed;
}
.not-allowed {
    @include not-allowed();
}

// Not selectable
//
// <code class="block">@mixin no-select</code>
// Use this class to make elements non selectable (press CTRL+A and you'll notice)
// <ul>
// <li>.no-select: makes element not selectable</li>
// </ul>
//
// Markup:
// <p class="no-select">This is a regular paragraph</p>
//
//
// Styleguide zMisc.noselect
@mixin no-select() {
    user-select: none;
    outline: none;
}
.no-select {
    @include no-select();
}

// Appearance
//
// <code class="block">@mixin fade</code>
// <code class="block">@mixin faded</code>
// <ul>
// <li>.fade: lowers opacity of an ele</li>
// <li>.faded: lowers the opacity even more</li>
// <li>.hover-fade: fade on hover</li>
// <li>.hover-faded: faded on hover</li>
// </ul>
// 
// Markup:
// <div class="fade">Fade</div>
// <div class="faded">Faded</div>
// <div class="hover-fade">Hover-fade</div>
// <div class="hover-faded">Hover-faded</div>
//
// Styleguide zMisc.appearance
@mixin fade() {
    opacity: 0.7;
}
@mixin faded() {
    opacity: 0.3;
}

.fade {
    @include fade();
}
.faded {
    @include faded();
}
.hover-fade:hover {
    @include fade();
}
.hover-faded:hover {
    @include faded();
}
.hover-normal {
    opacity: 1;
}

// Other
//
// <code class="block">@mixin unset</code>
// .unset: unsets all style
//
// Styleguide zMisc.zother
@mixin unset() {
    all: unset !important;
}
.unset {
    @include unset();
}