/*------------------------------------*\
    BRANDING
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

/// Height of logo in header
/// @type Number
$site-logo__height: 2rem !default;

/// Height of logo in header at medium breakpoint
/// @type Number
$site-logo__height--medium: 2.5rem !default;

// Fixed vars
$site-branding-padding: 0.75rem;
$site-branding-title-spacing: 1.5rem;
$site-branding-title-spacing--medium: 3rem;

.ds_site-branding {
    align-items: center;
    display: flex;
    flex-flow: wrap;
    gap: 1rem 0;
    overflow: hidden;
    padding: $site-branding-padding 0;
    position: relative;

    &__logo {
        height: $site-logo__height;
        margin-right: $site-branding-title-spacing;
    }

    &__logo-image {
        height: $site-logo__height;
        pointer-events: none;
        width: auto;
    }

    &__link {
        color: currentColor;
        display: inline-block;
        position: relative;
        text-decoration: none;

        @include helpers.ds_fancy-underscore;
    }

    &__title {
        font-weight: settings.$normal;
        line-height: 1.5rem;

        &::before {
            background: settings.$ds_colour__brand;
            bottom: $site-branding-padding;
            content: '';
            position: absolute;
            margin-left: calc($site-branding-title-spacing * -0.5);
            top: $site-branding-padding;
            width: 0.0625rem;
        }
    }

}

@include helpers.ds_media-query (medium) {
    .ds_site-branding {
        &__link {
            margin-bottom: 0;
        }

        &__logo {
            height: $site-logo__height--medium;
            margin-right: $site-branding-title-spacing--medium;
        }

        &__logo-image {
            height: $site-logo__height--medium;
        }

        &__title {

            &::before {
                margin-left: calc($site-branding-title-spacing--medium * -0.5);
            }
        }
    }
}