/*
Header
==================================================
Contains custom skin styles for the header at the top of the page.
The header contains the shop logo, the search form and various actions like the offcanvas cart button.
*/

.header-search-btn,
.header-close-btn {
    --#{$prefix}btn-focus-box-shadow:  #{$input-btn-focus-box-shadow};
    --#{$prefix}btn-border-color: #{$input-border-color};
    --#{$prefix}btn-hover-color: #{$primary};
    --#{$prefix}btn-hover-border-color: #{$input-border-color};
    --#{$prefix}btn-active-border-color: #{$input-border-color};
    --#{$prefix}btn-disabled-bg: #{$input-bg};
    --#{$prefix}btn-disabled-border-color: #{$border-color};
    border-left: 0 none;

    &:hover {
        .icon {
            color: $primary;
        }
    }

    &.btn:disabled {
        display: flex;
        align-items: center;
    }
}

.header-search-input {
    border-right: 0;

    &:focus {
        &,
        ~ .header-search-btn,
        ~ .header-close-btn {
            border-color: $primary;
        }
    }
}

.header-actions-btn {
    --#{$prefix}btn-focus-box-shadow:  #{$input-btn-focus-box-shadow};
    --#{$prefix}btn-active-border-color: transparent;
    --#{$prefix}btn-active-bg: transparent;
    --#{$prefix}btn-hover-color: transparent;
    --#{$prefix}btn-hover-border-color: transparent;
    --#{$prefix}btn-hover-bg: transparent;

    &:hover {
        &,
        .icon {
            color: $primary;
        }
    }
}

.header-cart-total {
    color: $primary;
    font-size: $font-size-lg;
}

@include media-breakpoint-up(sm) {
    .header-cart-badge {
        display: none;
    }
}
