@import "vars";

$variants: (
    ("", #AAA),
    (".primary", $primary-color),
    (".secondary", #444),
    (".danger", #C20),
    (".success", #2A1),
    (".text", transparent)
);

.action {
    background: #444444;
    color: white;
    font-family: "Roboto";
    font-size: 14px;
    border: none;
    border-radius: 2px;
    display: inline-block;
    margin-right: 2px;
    text-align: center;
    text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;

    @each $variant in $variants {
        $name: nth($variant, 1);
        $color: nth($variant, 2);

        &#{$name} {
            background: $color;
            box-shadow: 0 1px 0 darken($color, 5%);

            &:hover {
                background: lighten($color, 20%);
                box-shadow: 0 1px 0 lighten($color, 15%);
            }
        }
    }

    &:last-child {
        margin-right: 0;
    }

    &.large {
        $size: 40px;
        padding: 0 $size/2;
        height: $size;
        line-height: $size;

        font-size: 1.2em;
    }

    &.medium, & {
        $size: 32px;
        padding: 0 $size/2;
        height: $size;
        line-height: $size;
    }

    &.small {
        $size: 24px;
        padding: 0 $size/2;
        height: $size;
        line-height: $size;
    }

    &.icon {
        $size: 24px;
        padding: 0;
        width: $size;
        height: $size;
        line-height: $size;
        font-size: 14px;

        span {
            display: none;
        }
    }

    &, &:hover, &:active, &:focus {
        color: white;
        text-decoration: none;
        outline: none;
    }

    &.text {
        &, &:hover, &:active, &:focus {
            text-shadow: none;
            color: #666;
        }

        &:hover {
            color: #888;
        }
    }


    i.fa-solid {
        font-size: 14px;
    }

    i.fa-solid + span,
    span + i.fa-solid {
        margin-left: 6px;
    }

    &.block {
        display: block;
        margin-bottom: 4px;
        width: 100%;
        box-sizing: border-box;
    }
}