_buttons.scss

@charset 'UTF-8';

button {
    &.style--none {
        background: transparent;
        border: none;
        padding: 0;

        &:focus {
            outline: 0;
            text-decoration: none;
        }

        &.btn {
            padding: 6px 12px;
        }

        &.btn--block {
            text-align: left;
            width: 100%;
        }

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

.btn {
    @include single-transition(all, .15s, ease);
    @include border-radius($border-rad);

    &.btn-primary {
        background: $primary-color;
        border-color: transparent;

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

    &.btn-danger {
        color: $white;

        .app__body & {
            color: $white;

            &:hover,
            &:focus,
            &:active {
                color: $white;
            }
        }

        &:hover,
        &:focus,
        &:active {
            color: $white;
        }
    }

    &.btn-transparent {
        background: transparent;
        border: none;
        padding: 7px 12px;
    }

    &.btn-inactive {
        background: $light-gray;
        border-color: transparent;
        color: $white;
    }

    .fa {
        margin-right: 3px;

        &.margin-right {
            margin-right: 6px;
        }

        &.margin-left {
            margin-left: 6px;
        }
    }

    &.btn-link {
        &:active,
        &:focus {
            outline: none;
        }
    }
}

%btn-transition {
    @include single-transition(all, .15s, ease);
}

.btn-icon {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.6rem;
    fill: v(center-channel-color-56);
    color: v(center-channel-color-56);

    &:hover {
        background: v(center-channel-color-08);
        fill: v(center-channel-color-72);
        color: v(center-channel-color-72);
    }

    &:active,
    &--active,
    &--active:hover {
        background: v(button-bg-08);
        fill: v(button-bg);
        color: v(button-bg);
    }
}