//
//  DIALTONE
//  COMPONENTS: BANNERS
//
//  These are the styles for banners, which are a type of notice used
//  to alert users about important information relevant to them.
//  For further documentation of these styles, please visit:
//  https://dialtone.dialpad.com/components/banners
//
//  ============================================================================
//  $   BASE WRAPPER
//  ----------------------------------------------------------------------------
.d-banner {
    //  Component CSS Vars
    //  ------------------------------------------------------------------------
    --banner-color-border: var(--dt-color-border-subtle);
    --banner-line-height: var(--dt-font-line-height-200);
    --banner-dialog-padding-y: var(--dt-space-400);
    --banner-dialog-padding-x: var(--dt-space-500);

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--zi-navigation-fixed);
    max-width: 100%;
    min-height: var(--dt-size-650); // 48
    padding: 0;
    line-height: var(--banner-line-height);
    border-bottom: 1px solid var(--banner-color-border);
    border-radius: 0;
    box-shadow: none;

    &[aria-hidden='true'] {
        visibility: hidden;
        opacity: 0;
    }

    &[aria-hidden='false'] {
        visibility: visible;
        opacity: 1;
    }

    &--pinned {
        z-index: calc(~'var(--zi-navigation-fixed) + 1');
        transform: translate3d(0, 0, 0);
    }
}

//  ============================================================================
//  $   CONTENT CONTAINER
//  ----------------------------------------------------------------------------
.d-banner__dialog {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 128rem;
    min-height: 100%;
    margin: 0 auto;
    padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);

    .d-notice__content {
        flex-direction: row;
        gap: var(--dt-space-300);
        align-items: baseline;
    }
}

//  ============================================================================
//  $   STYLES
//  ============================================================================
//  $$  DEFAULT IMPORTANT
//  ----------------------------------------------------------------------------
.d-banner.d-banner--important {
    --banner-color-border: transparent;
}