@import '../dynamic.scss';

.btn {
    font-family: $font-family-base;
    font-weight: $btn-font-weight;

    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    white-space: nowrap;
    width: auto;

    .icon {
        height: 100%;
        vertical-align: text-bottom;
        &.icon-before {
            margin-right: 0.5rem;
        }
        &.icon-after {
            margin-left: 0.5rem;
        }
    }
}

@each $color, $value in $theme-colors {
    .btn-#{$color} {
        @include button-variant(
            $value,
            $value,
            // Hover
                map-get($highlighted-colors, $color),
            map-get($highlighted-colors, $color),
            // Active darken($value, 10%),
            map-get($active-colors, $color),
            map-get($active-colors, $color)
        );
        &.disabled,
        &:disabled {
            opacity: $btn-disabled-opacity;
        }
        &:active {
            box-shadow: none;
        }
        &:focus {
            background-color: map-get($highlighted-colors, $color);
            border-color: map-get($active-colors, $color);
            box-shadow: 0 0 0.1rem 0.1rem map-get($active-colors, $color) inset;
        }
    }

    .btn-outline-#{$color} {
        border-color: $gray-400;
        &:active {
            box-shadow: none;
        }
        &:focus {
            border-color: map-get($active-colors, $color);
            box-shadow: 0 0 0.1rem 0.1rem map-get($active-colors, $color) inset;
        }
    }

    .btn-translucent {
        background-color: transparentize($gray-800, 0.6);
        color: white;
        &:hover,
        &:active {
            background-color: transparentize($gray-800, 0.4);
            color: white;
        }
    }
}

.btn-sm {
    font-size: $font-size-base;
}

.btn-lg {
    font-size: $font-size-lg;
}

.btn-fluid {
    width: 100%;
    &.btn--icon {
        min-width: 16rem;
        width: 100%;
        height: auto;
    }
    &.btn--icon-fixed {
        min-width: 24rem;
        position: relative;
        .icon-before,
        .icon-before > svg {
            display: block;
            margin: 0 auto;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 2.5rem;
        }

        .icon-after,
        .icon-after > svg {
            display: block;
            margin: 0 auto;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 2.5rem;
        }
    }
}

.btn-shadow {
    box-shadow: 0 0.2rem 0 transparentize($black, 0.95);
}

.btn-light {
    background: $white;
}

.btn-group {
    & > .btn + .btn {
        margin-left: 0;
    }
    & > .btn:not(:first-child) {
        border-left: 1px currentColor solid;
    }
}

.btn-toggle {
    background-color: $white;
    color: $dark;
    border-color: $dark;
    &.btn-toggle:hover,
    &.active {
        background-color: $dark;
        color: $white !important;
        svg {
            fill: $white;
        }
    }
    svg {
        fill: $dark;
    }
}

.btn-tag {
    border-radius: 6px;
}

.btn-wide {
    min-width: 20rem;
}

.btn-link-branded {
    background-color: transparent;
    color: $dark;
    border-color: transparent;
    min-height: $input-height;
    &:hover,
    &:active,
    &:focus {
        border-color: $gray-400;
        text-decoration: none;
        color: $dark;
    }
    &:active,
    &:focus,
    &.active {
        background-color: $branded;
        border-color: transparent;
    }
    svg {
        fill: $dark;
    }
}

.btn-round {
    width: $input-height;
    height: $input-height;
    padding: 0;
    font-size: $font-size-base;
    line-height: $input-height;
    border-radius: 50%;
}
.btn-round.btn-sm {
    font-size: $font-size-sm;
    line-height: $input-height-sm;
    width: $input-height-sm;
    height: $input-height-sm;
}
.btn-round.btn-lg {
    font-size: $font-size-lg;
    line-height: $input-height-lg;
    width: $input-height-lg;
    height: $input-height-lg;
}
.btn-round.btn-lg {
    width: 5.6rem;
    height: 5.6rem;
    font-size: $font-size-xl;
}