$btn-vertical-padding: 12px;
$super-dark-btn-color: $grey-super-dark !default;

.c-btn {
    display: inline-block;
    padding: $btn-vertical-padding 20px;
    font-family: $secondary-font-family;
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-size: $font-size-tool-m;
    line-height: $line-height-tool-m;
    font-weight: $font-weight-semi-bold;
    border-radius: 0;

    &:disabled {
        cursor: initial;
    }

    &.is-focus--mouse {
        outline: none;
    }
}

    $btn-icon-margin: 8px;
    .c-btn__icon {
        vertical-align: bottom;
        margin-left: $btn-icon-margin;
    }
        .c-btn__icon--left {
            margin-left: 0;
            margin-right: $btn-icon-margin;
        }

    .c-btn--xsmall {
        min-width: 137px;
    }
    .c-btn--small {
        min-width: 172px;
    }
    .c-btn--med {
        min-width: 184px;
    }
    .c-btn--large {
        min-width: 226px;
    }
    .c-btn--xlarge {
        min-width: 354px;
    }
    .c-btn--giant {
        $btn-giant-v-padding: 22px;
        padding-top: $btn-giant-v-padding;
        padding-bottom: $btn-giant-v-padding;
        width: 100%
    }

    .c-btn--primary {
        $main-btn-background: var(--brand-color, $accent-a);
        color: $white-color;
        background-color: $main-btn-background;
        transition: background-color $default-animation-exit, color $default-animation-exit;

        .c-icon {
            transition: opacity $default-animation-basic;
        }

        &:disabled {
            .c-icon {
                opacity: 0.3;
            }
        }

        &:hover:not([disabled]) {
            @if type-of($main-btn-background) == color {
                background-color: lighten($main-btn-background, $hover-lighten-percent);
            } @else {
                opacity: 0.92;
            }
            transition: background-color $default-animation-enter, color $default-animation-enter;
        }
    }

    .c-btn--success {
        background-color: $accent-b;
        transition: background-color $default-animation-exit;

        &:hover {
            background-color: $accent-b--hover;
            transition: background-color $default-animation-enter;
        }
    }

    .c-btn--dark {
        color: $white-color;
        background-color: $super-dark-btn-color;
        transition: background-color $default-animation-exit;

        &:hover {
            transition: background-color $default-animation-enter;
            background-color: lighten(
                $super-dark-btn-color, $hover-lighten-percent--black
            );
        }
    }

    .c-btn--toggle {
        background: $white-color;
        color: $super-dark-btn-color;
        transition: color $default-animation-exit, background $default-animation-exit;
        border: 1px solid $grey-light;
        $btn-toggle-vertical-padding: 10px;
        padding-top: $btn-toggle-vertical-padding;
        padding-bottom: $btn-toggle-vertical-padding;

        .c-btn__icon {
            @include setSvgColor(
                $super-dark-btn-color
            );
            transition: stroke $default-animation-exit, fill $default-animation-exit;
        }

        &:hover {
            color: $accent-a;
            transition: color $default-animation-enter, background $default-animation-enter;

            .c-btn__icon {
                @include setSvgColor(
                    $accent-a
                );
                transition: stroke $default-animation-enter, fill $default-animation-enter;
            }
        }

        &:disabled:hover,
        &:disabled {
            background: $super-dark-btn-color;
            color: $white-color;
            border-color: transparentize($grey-light, 0.7);
            .c-btn__icon {
                @include setSvgColor(
                    $white-color
                );
            }
        }
    }
        $btn-toggle-border-radius: 108px;
        .c-btn--toggle--left {
            border-top-left-radius: $btn-toggle-border-radius;
            border-bottom-left-radius: $btn-toggle-border-radius;
            border-right: none;
        }
        .c-btn--toggle--right {
            border-top-right-radius: $btn-toggle-border-radius;
            border-bottom-right-radius: $btn-toggle-border-radius;
            border-left: none;
        }

    .c-btn--grey {
        $btn--grey-animation-exit: color $default-animation-exit, background $default-animation-exit, border-color $default-animation-exit;
        background: $grey-light;
        color: $grey-dark;
        transition: $btn--grey-animation-exit;
        border: 3px solid $grey-light;
        $btn-grey-vertical-padding: 8px;
        padding-top: $btn-grey-vertical-padding;
        padding-bottom: $btn-grey-vertical-padding;

        .c-btn--grey__tick-icon {
            display: none;
        }

        &:hover {
            color: $accent-a;
            transition: color $default-animation-enter, background $default-animation-enter, border-color $default-animation-enter;
        }

        &.c-btn--grey--selected {
            background: $white-color;
            color: $grey-super-dark;
            border-color: $grey-super-dark;
            transition: $btn--grey-animation-exit;

            .c-btn--grey__tick-icon {
                display: inline-block;
            }
        }
    }

    .c-btn--outline {
        $outlineBorderSize: 2px;
        $outlineButtonVertialPadding: $btn-vertical-padding - $outlineBorderSize;
        border: 2px solid $grey-light;
        background: transparent;
        color: $grey-super-dark;
        transition: border-color $default-animation-exit, color $default-animation-exit;
        padding-top: $outlineButtonVertialPadding;
        padding-bottom: $outlineButtonVertialPadding;

        .c-btn__icon {
            transition: fill $default-animation-exit, stroke $default-animation-exit;
        }

        &:hover {
            color: $accent-a;
            transition: border-color $default-animation-enter, color $default-animation-enter;

            .c-btn__icon {
                @include setSvgColor(
                    $accent-a
                );
                transition: fill $default-animation-enter, stroke $default-animation-enter;
            }
        }
    }

    .c-btn--bare {
        padding: 0;
        color: $black-color;
        background-color: transparent;
        border: none;
        transition: color $default-animation-exit;

        &:hover {
            background-color: transparent;
            color: lighten($grey-dark, $hover-lighten-percent--black);
            transition: color $default-animation-enter;
        }
    }

    .c-btn--round {
        $base-border-color: $grey-light;
        $base-icon-color: $grey-super-dark;
        $base-background-color: none;
        padding: 0;
        background: $base-background-color;
        $btn-round-size: 48px;
        width: $btn-round-size;
        height: $btn-round-size;
        border-radius: 50%;
        border: 3px solid $base-border-color;
        transition: border-color $default-animation-exit, background $default-animation-exit;

        .c-btn--round__icon {
            transition: fill $default-animation-exit, stroke $default-animation-exit;
            @include setSvgColor(
                $base-icon-color
            );
        }

        &:hover {
            $hover-color: $accent-a;
            border-color: $hover-color;
            background: $hover-color;
            transition: border-color $default-animation-enter, background $default-animation-enter;
            .c-btn--round__icon {
                transition: fill $default-animation-enter, stroke $default-animation-enter;
                @include setSvgColor(
                    $white-color
                );
            }
        }

        &:disabled {
            opacity: 0.3;

            &:hover {
                background: $base-background-color;
                border-color: $base-border-color;

                .c-btn--round__icon {
                    @include setSvgColor(
                        $base-icon-color
                    );
                };
            }
        }
    }

    .c-btn--accent-a-text {
        color: $accent-a;

        &:hover {
            @if type-of($accent-a) == color {
                color: lighten($accent-a, $hover-lighten-percent);
            } @else {
                opacity: 0.92;
            }
        }
    }