shared/scss/_mixins.scss
@use 'vars';

/* Logo */
@mixin ddg_logo() {
    background-size: contain;
    @include cross_platform_bg_image('logo-horizontal@2x.png');
}

@mixin ddg_logo--small() {
    background-size: contain;
    @include cross_platform_bg_image('logo-small.svg');
}

/* App states */
@mixin is_disabled() {
    opacity: 0.5;
}

@mixin is_disableable_link() {
    body.is-disabled & {
        cursor: default;

        &:hover {
            text-decoration: none;
        }
    }
}

/* Font groupings */
@mixin uppercase_label() {
    font-size: 12px;
    color: vars.$color--grey;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.uppercase {
    @include uppercase_label();
}

/* Lists */
@mixin default_list() {
    .default-list {
        list-style-type: none;
        padding-left: 0;
        padding-bottom: 0px;
        margin-top: 0;

        li .icon__arrow {
            right: 15px;
            top: 19px;
        }
    }
}

/* Toggle buttons */
@mixin toggle_button() {
    .toggle-button {
        z-index: 0;
        position: absolute;
        right: 14px;
        width: 42px;
        height: 24px;
        margin-top: -3px;
        margin: 0;
        padding: 0;
        border: none;
        background-color: transparent;
        text-align: left;

        .toggle-button__bg {
            z-index: -1;
            position: absolute;
            right: 0;
            width: 42px;
            overflow: visible;
            height: 24px;
            border-radius: 100px;
        }

        .toggle-button__knob {
            z-index: 2;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 100px;
            background-color: #ffffff;
            margin-top: 1.85px;
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
        }

        &.toggle-button--is-active-false {
            .toggle-button__knob {
                margin-left: 0px;
            }

            .toggle-button__bg {
                background-color: vars.$color--medium-dark-platinum;
            }
        }

        &.toggle-button--is-active-true {
            .toggle-button__knob {
                margin-left: 20px;
            }

            .toggle-button__bg {
                background-color: vars.$color--green;
            }
        }
    }
}

/* Images & icons */
@mixin icon_display() {
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Cross-platform background image */
@mixin cross_platform_bg_image($image) {
    $asset-path: '__MSG_@@extension_id__/img/';
    .is-browser--chrome & {
        background-image: url('chrome-extension://#{$asset-path}#{$image}');
    }
    .is-browser--moz & {
        background-image: url('moz-extension://#{$asset-path}#{$image}');
    }
}

/* Sliding subviews */
@mixin sliding_subview() {
    .sliding-subview {
        position: absolute;
        top: 0;
        left: vars.$popup__width;
        width: vars.$popup__width;
        height: 100%;
        box-sizing: border-box;

        &.sliding-subview--root {
            position: relative;
            top: 0;
            left: 0;
            transition: left 0.35s ease-in-out;

            &.sliding-subview--open {
                left: -(vars.$popup__width);
            }
        }

        &.sliding-subview--has-fixed-header {
            padding: 58px 0 0 0;
        }

        .sliding-subview__header {
            z-index: 10;
            position: fixed;
            top: 10px;
            left: 0;
            right: 0;
            height: 42px;
            margin: 0;
            font-size: 1.14em;
            color: #383838;
            overflow: hidden;

            .sliding-subview__header__back,
            .sliding-subview__header__title {
                height: 26px;
                width: 14px;
                color: vars.$slate;
                font-size: 14px;
                font-weight: bold;
                padding: 14px 0 0 14px;
                display: inline-block;

                &.sliding-subview__header__back--is-icon {
                    padding-left: 35px;
                }
            }

            .sliding-subview__header__title {
                z-index: -1;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                width: auto;
                text-align: center;
                font-weight: bold;
                color: vars.$slate;
                padding: 14px 0 10px 0;
                text-decoration: none;
            }
        }
    }
}

@mixin placeholder {
    .is-browser--chrome & {
        &::-webkit-input-placeholder {
            @content;
        }
    }
    .is-browser--moz & {
        &:-moz-placeholder {
            @content;
        }
        &::-moz-placeholder {
            @content;
        }
    }
}

@mixin arrow-left($size, $color) {
    width: 0;
    height: 0;
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
}

@mixin btn-pill($size) {
    border-radius: 28px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid vars.$color--medium-dark-slate;
    color: vars.$color--medium-dark-slate;
    background: vars.$white;
    padding: 0.4em 1.2em;
    text-decoration: none;
    text-align: center;
    font-size: $size;
    display: inline-block;
}

@mixin explainer-padding {
    padding: 10px 24px 20px;
}
