// Styling for the buttons

/*
 * NOTES:
 * When removing the outline also create a visible replacement so keyboard users
 * always can see their position on the website while navigating.
 */

%button {
    border: none;
    border-radius: $border-radius-md;
    display: inline-block;
    padding: rem(16px) rem(32px);
    text-decoration: none;
    transition: $transition-slow;

    &:hover,
    &:focus,
    &:active {
        cursor: pointer;
        text-decoration: none;
        transition: $transition-slow;
    }
}

.button--primary {
    @extend %button;
    background: $color-secondary;
    color: $color-text-light;

    &:hover,
    &:focus {
        background: $color-secondary-hover;
    }

    &:active {
        background: $color-secondary-active;
    }
}

.button--ghost {
    @extend %button;
    background: transparent;
    border: 1px solid $color-secondary;
    color: $color-secondary;

    &:hover,
    &:focus {
        background: $color-secondary-light;
        border: 1px solid $color-secondary-hover;
        color: $color-shade-lightest;
    }

    &:active {
        background: $color-secondary-active;
        border: 1px solid $color-secondary-active;
        color: $color-shade-lightest;
    }
}

.button--text-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid $color-text-dark;
    color: $color-text-dark;
    padding: 0;

    &:hover,
    &:focus {
        border-bottom: 0;
        color: darken($color-text-dark, 20%);
    }
}

.button--round {
    align-items: center;
    border: none;
    border-radius: $border-radius-round;
    box-shadow: $shadow-2;
    color: $color-primary;
    display: flex;
    height: 50px;
    justify-content: center;
    width: 50px;

    @include media-breakpoint-down(lg) {
        height: 40px;
        width: 40px;
    }

    &:hover,
    &:focus,
    &:active {
        background-color: $color-primary-light;
        color: $color-primary;
        transition: $transition-slow;
    }

    svg {
        align-self: center;
        height: 20px;
        width: 20px;
    }
}
