buttons.scss

@import '../mixins';

@mixin button() {
    background: white;
    border: 1px solid var(--base-color);
    border-radius: 0;
    box-sizing: border-box;
    color: var(--base-color);
    cursor: pointer;
    display: inline-block;
    font-family: $font-family-base;
    font-size: 14px;
    line-height: 130%;
    margin: 0.8em 0.6em 0.8em 0;
    min-width: 100px;
    overflow: visible;
    padding: 5px 15px;
    position: relative;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;

    &:hover,
    &:active  {
        background: var(--base-color);
        color: white;
    }

    &.disabled,
    &[disabled] {
        box-shadow: none;
        background: var(--light-gray-color-20);
        cursor: default;
        opacity: 0.65;

        &:hover {
            color: var(--base-color);
        }
    }

    transition: none;
}

a.button,
button.button {
    @include button();
}

.button-with-empty-icon {
    white-space: nowrap;

    &::before {
        background-repeat: no-repeat;
        content: " ";
        float: left;
        height: 16px;
        margin: 1px 5px 0 -8px;
        width: 16px;
    }
}

@mixin button-with-icon($icon, $role, $roleOnHover) {
    @extend .button-with-empty-icon;
    &::before {
        @include background-icon($icon, $role);
    }

    &:hover::before {
        @include background-icon($icon, $roleOnHover);
    }

    &.disabled,
    &[disabled] {
        &:hover::before {
            @include background-icon($icon, $role);
        }
    }
}

.button.accept {
    @include button-with-icon(accept, clickable, info_alt);
}
.button.cancel {
    @include button-with-icon(decline, clickable, info_alt);
}
.button.edit {
    @include button-with-icon(edit, clickable, info_alt);
}
.button.move-up {
    @include button-with-icon(arr_1up, clickable, info_alt);
}
.button.move-down {
    @include button-with-icon(arr_1down, clickable, info_alt);
}
.button.add {
    @include button-with-icon(add, clickable, info_alt);
}
.button.trash {
    @include button-with-icon(trash, clickable, info_alt);
}
.button.download {
    @include button-with-icon(download, clickable, info_alt);
}
.button.search {
    @include button-with-icon(search, clickable, info_alt);
}
.button.arr_left {
    @include button-with-icon(arr_1left, clickable, info_alt);
}
.button.refresh {
    @include button-with-icon(refresh, clickable, info_alt);
}
.button.arr_right {
    @include button-with-icon(arr_1right, clickable, info_alt);
    &::before {
        float: right;
        margin: 1px -8px 0 5px;
    }
}

/* Grouped Buttons */
.button-group {
    display: inline-block;
    list-style: none;
    margin: 0 0.8em 0 0;
    padding: 0;
    vertical-align: middle;

    button,
    .button {
        float: left;
        margin-left: 5px;
        margin-right: 0;
    }
}


button.styleless {
    background-color: unset;
    border: 0;
}

button.as-link {
    border: 0;
    background-color: transparent;
    color: var(--base-color);
    cursor: pointer;
    line-height: 1em;
    padding: 0;
    &:hover,
    &:active {
        color: var(--active-color);
    }

    @media not prefers-reduced-motion {
        transition: color $transition-duration;
    }
}