.btn {
    padding: rem(9px) rem(12px);
    font-size: rem(16px);
    font-weight: 500;

    &.btn-lg {
        padding: rem(15px) rem(14px);
        font-weight: 600;
    }

    &.btn-sm {
        padding: rem(8px) rem(14px);
        font-size: rem(14px);
    }
}

// // Add btn class name and color through sass loop
$btn-colors: (
    "success" --success,
    "danger" --danger,
    "warning" --warning,
    "info" --info,
);

@each $name, $color in $btn-colors {
    .btn-#{$name} {
        background-color: var(#{$color}-main);
        color: #fff;
        border-color: var(#{$color}-main);

        &:hover {
            background-color: var(#{$color}-hover);
            color: #fff;
            border-color: var(#{$color}-main);
        }

        &:active,
        &:focus {
            background-color: var(#{$color}-pressed);
            color: #fff;
            border-color: var(#{$color}-pressed);
        }
    }
}

@each $name, $color in $btn-colors {
    .btn-outline-#{$name} {
        background-color: transparent;
        color: var(#{$color}-main);
        border-color: var(#{$color}-main);

        &:hover {
            background-color: var(#{$color}-hover);
            color: #fff;
            border-color: var(#{$color}-main);
        }

        &:active,
        &:focus {
            background-color: var(#{$color}-pressed) !important;
            color: #fff !important;
            border-color: var(#{$color}-pressed) !important;
        }
    }
}


/* Pill Btn */
@each $color, $shades in $colors {
    @each $shade, $value in $shades {
        .btn-#{$color}-#{$shade} {
            background-color: var(--#{$color}-#{$shade});
            color: #fff;
            border-color: var(--#{$color}-#{$shade});

            &:hover {
                background-color: var(--#{$color}-700);
                color: #fff !important;
                border-color: var(--#{$color}-700);
            }

            &:active,
            &:focus {
                background-color: var(--#{$color}-800) !important;
                color: #fff !important;
                border-color: var(--#{$color}-800) !important;
            }
        }
    }
}

/* Outline Btn */
@each $color, $shades in $colors {
    @each $shade, $value in $shades {
        .btn-outline-#{$color}-#{$shade} {
            background-color: transparent !important;
            color: var(--#{$color}-#{$shade}) !important;
            border-color: var(--#{$color}-#{$shade}) !important;

            &:hover {
                background-color: var(--#{$color}-#{$shade}) !important;
                color: #fff !important;
                border-color: var(--#{$color}-#{$shade}) !important;
            }

            &:active,
            &:focus {
                background-color: var(--#{$color}-800) !important;
                color: #fff !important;
                border-color: var(--#{$color}-800) !important;
            }
        }
    }
}