@import '../tools/colors';
.loop-btn {
    border: 1px solid $slate900;
    border-radius: 5px;
    background: $grey900;
    font-weight: 700;
    color: $slate800;
    font-size: 13px;
    padding: 8px 20px;
    &:active,
    &:focus {
        outline: 0;
    }
    &.loop-red {
        color: $loop100;
        &-inverse {
            background: $loop100;
            border: 1px solid $loop100;
            color: $grey900;
        }
    }
    &.btn-trans {
        color: $grey900;
        border: none;
        font-size: 12px;
        background: rgba($slate100, 0.5);
    }
    &.selected {
        background: $slate800;
        color: $grey800;
    }
}

.loop-action-btn {
    border: none;
    font-size: 1.5em;
    color: $grey900;
    background-color: $loop100;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: auto;
    -webkit-box-shadow: 2px 3px 3px 0px rgba(41, 41, 41, .3);
    -moz-box-shadow: 2px 3px 3px 0px rgba(41, 41, 41, .3);
    box-shadow: 2px 3px 3px 0px rgba(41, 41, 41, .3);
    &.loop-btn-sm {
        width: 42px;
        height: 42px;
    }
    &:hover {
        background-color: darken($loop100, 5%);
    }
    &:active,
    &:focus {
        outline: none;
    }
}

.btn {
    font-size: 14px;
}