@sandlada/vue-mdc/src/components/labs/navigation-drawer/navigationDrawerItem.module.css


.container {
    --_navigation-drawer-item-container-color: var(--glare-ui-navigation-drawer-item-container-color, var(--_current-navigation-drawer-item-container-color));
    --_navigation-drawer-item-inactive-container-color: var(--glare-ui-navigation-drawer-item-inactive-container-color, var(--_current-navigation-drawer-item-inactive-container-color, transparent));
    --_navigation-drawer-item-active-container-color: var(--glare-ui-navigation-drawer-item-active-container-color, var(--_current-navigation-drawer-item-active-container-color, var(--md-sys-color-secondary-container, #e8def8)));

    --_navigation-drawer-item-container-height: var(--glare-ui-navigation-drawer-item-container-height, var(--_current-navigation-drawer-item-container-height, 56px));
    --_navigation-drawer-item-container-width: var(--glare-ui-navigation-drawer-item-container-width, var(--_current-navigation-drawer-item-container-width, 100%));

    --_navigation-drawer-item-label-text-color: var(--glare-ui-navigation-drawer-item-active-label-text-color, var(--_current-navigation-drawer-item-label-text-color));
    --_navigation-drawer-item-active-label-text-color: var(--glare-ui-navigation-drawer-item--activelabel-text-color, var(--_current-navigation-drawer-item-active-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-label-text-color: var(--glare-ui-navigation-drawer-item-inactive-label-text-color, var(--_current-navigation-drawer-item-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f)));
    --_navigation-drawer-item-hover-label-text-color: var(--glare-ui-navigation-drawer-item-hover-label-text-color, var(--_current-navigation-drawer-item-hover-label-text-color));
    --_navigation-drawer-item-active-hover-label-text-color: var(--glare-ui-navigation-drawer-item-active-hover-label-text-color, var(--_current-navigation-drawer-item-active-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-hover-label-text-color: var(--glare-ui-navigation-drawer-item-inactive-hover-label-text-color, var(--_current-navigation-drawer-item-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));
    --_navigation-drawer-item-pressed-label-text-color: var(--glare-ui-navigation-drawer-item-pressed-label-text-color, var(--_current-navigation-drawer-item-pressed-label-text-color));
    --_navigation-drawer-item-active-pressed-label-text-color: var(--glare-ui-navigation-drawer-item-active-pressed-label-text-color, var(--_current-navigation-drawer-item-active-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-pressed-label-text-color: var(--glare-ui-navigation-drawer-item-inactive-pressed-label-text-color, var(--_current-navigation-drawer-item-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));
    

    --_navigation-drawer-item-label-text-font: var(--glare-ui-navigation-drawer-item-label-text-font, var(--_current-navigation-drawer-item-label-text-font, var(--md-sys-typescale-label-large-font, Roboto)));
    --_navigation-drawer-item-label-text-line-height: var(--glare-ui-navigation-drawer-item-label-text-line-height, var(--_current-navigation-drawer-item-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 20px)));
    --_navigation-drawer-item-label-text-font-size: var(--glare-ui-navigation-drawer-item-label-text-font-size, var(--_current-navigation-drawer-item-label-text-font-size, var(--md-sys-typescale-label-large-font-size, 14px)));
    --_navigation-drawer-item-label-text-letter-spacing: var(--glare-ui-navigation-drawer-item-label-text-letter-spacing, var(--_current-navigation-drawer-item-label-text-letter-spacing, var(--md-sys-typescale-label-large-letter-spacing, 0.1px)));
    --_navigation-drawer-item-label-text-font-weight: var(--glare-ui-navigation-drawer-item-inactive-label-text-font-weight, var(--_current-navigation-drawer-item-label-text-font-weight));
    --_navigation-drawer-item-inactive-label-text-font-weight: var(--glare-ui-navigation-drawer-inactive-item-label-text-font-weight, var(--_current-navigation-drawer-item-inactive-label-text-font-weight, var(--md-sys-typescale-label-large-font-weight, 500)));
    --_navigation-drawer-item-active-label-text-font-weight: var(--glare-ui-navigation-drawer-active-item-label-text-font-weight, var(--_current-navigation-drawer-item-active-label-text-font-weight, var(--md-sys-typescale-label-large-font-weight-prominent, 700)));

    --_navigation-drawer-item-icon-size: var(--glare-ui-navigation-drawer-item-active-icon-size, var(--_current-navigation-drawer-item-icon-size, 24px));
    --_navigation-drawer-item-icon-color: var(--glare-ui-navigation-drawer-item-active-icon-color, var(--_current-navigation-drawer-item-icon-color));
    --_navigation-drawer-item-active-icon-color: var(--glare-ui-navigation-drawer-item-active-active-icon-color, var(--_current-navigation-drawer-item-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-icon-color: var(--glare-ui-navigation-drawer-item-active-inactive-icon-color, var(--_current-navigation-drawer-item-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f)));
    --_navigation-drawer-item-fill-color: var(--glare-ui-navigation-drawer-item-icon-fill-color, var(--_navigation-drawer-item-icon-color));
    --_navigation-drawer-item-hover-icon-color: var(--glare-ui-navigation-drawer-item-hover-icon-color, var(--_current-navigation-drawer-item-hover-icon-color));
    --_navigation-drawer-item-active-hover-icon-color: var(--glare-ui-navigation-drawer-item-active-hover-icon-color, var(--_current-navigation-drawer-item-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-hover-icon-color: var(--glare-ui-navigation-drawer-item-inactive-hover-icon-color, var(--_current-navigation-drawer-item-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20)));
    --_navigation-drawer-item-pressed-icon-color: var(--glare-ui-navigation-drawer-item-pressed-icon-color, var(--_current-navigation-drawer-item-pressed-icon-color));
    --_navigation-drawer-item-active-pressed-icon-color: var(--glare-ui-navigation-drawer-item-active-pressed-icon-color, var(--_current-navigation-drawer-item-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-pressed-icon-color: var(--glare-ui-navigation-drawer-item-inactive-pressed-icon-color, var(--_current-navigation-drawer-item-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20)));
    

    --_navigation-drawer-item-hover-state-layer-color: var(--glare-ui-navigation-drawer-item-hover-state-layer-color, var(--_current-navigation-drawer-item-hover-state-layer-color));
    --_navigation-drawer-item-active-hover-state-layer-color: var(--glare-ui-navigation-drawer-item-active-hover-state-layer-color, var(--_current-navigation-drawer-item-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-hover-state-layer-color: var(--glare-ui-navigation-drawer-item-inactive-hover-state-layer-color, var(--_current-navigation-drawer-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));
    --_navigation-drawer-item-pressed-state-layer-color: var(--glare-ui-navigation-drawer-item-pressed-state-layer-color, var(--_current-navigation-drawer-item-pressed-state-layer-color));
    --_navigation-drawer-item-active-pressed-state-layer-color: var(--glare-ui-navigation-drawer-item-active-pressed-state-layer-color, var(--_current-navigation-drawer-item-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    --_navigation-drawer-item-inactive-pressed-state-layer-color: var(--glare-ui-navigation-drawer-item-inactive-pressed-state-layer-color, var(--_current-navigation-drawer-item-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b)));
    

    --_navigation-drawer-item-hover-state-layer-opacity: var(--glare-ui-navigation-drawer-item-hover-state-layer-opacity, var(--_current-navigation-drawer-item-hover-state-layer-opacity, 0.08));
    --_navigation-drawer-item-pressed-state-layer-opacity: var(--glare-ui-navigation-drawer-item-pressed-state-layer-opacity, var(--_current-navigation-drawer-item-hover-state-layer-opacity, 0.1));
}
.container.inactive {
    --_current-navigation-drawer-item-container-color: var(--_navigation-drawer-item-inactive-container-color);
    --_current-navigation-drawer-item-label-text-color: var(--_navigation-drawer-item-inactive-label-text-color);
    --_current-navigation-drawer-item-label-text-font-weight: var(--_navigation-drawer-item-inactive-label-text-font-weight);
    --_current-navigation-drawer-item-icon-color: var(--_navigation-drawer-item-inactive-icon-color);
    --_current-navigation-drawer-item-hover-label-text-color: var(--_navigation-drawer-item-inactive-hover-label-text-color);
    --_current-navigation-drawer-item-pressed-label-text-color: var(--_navigation-drawer-item-inactive-pressed-label-text-color);
    --_current-navigation-drawer-item-hover-state-layer-color: var(--_navigation-drawer-item-inactive-hover-state-layer-color);
    --_current-navigation-drawer-item-pressed-state-layer-color: var(--_navigation-drawer-item-inactive-pressed-state-layer-color);
    --_current-navigation-drawer-item-hover-icon-color: var(--_navigation-drawer-item-inactive-hover-icon-color);
    --_current-navigation-drawer-item-pressed-icon-color: var(--_navigation-drawer-item-inactive-pressed-icon-color);
    transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15);
    transition-duration: 200ms;
}
.container.active {
    --_current-navigation-drawer-item-container-color: var(--_navigation-drawer-item-active-container-color);
    --_current-navigation-drawer-item-label-text-color: var(--_navigation-drawer-item-active-label-text-color);
    --_current-navigation-drawer-item-label-text-font-weight: var(--_navigation-drawer-item-active-label-text-font-weight);
    --_current-navigation-drawer-item-icon-color: var(--_navigation-drawer-item-active-icon-color);
    --_current-navigation-drawer-item-hover-label-text-color: var(--_navigation-drawer-item-active-hover-label-text-color);
    --_current-navigation-drawer-item-pressed-label-text-color: var(--_navigation-drawer-item-active-pressed-label-text-color);
    --_current-navigation-drawer-item-hover-state-layer-color: var(--_navigation-drawer-item-active-hover-state-layer-color);
    --_current-navigation-drawer-item-pressed-state-layer-color: var(--_navigation-drawer-item-active-pressed-state-layer-color);
    --_current-navigation-drawer-item-hover-icon-color: var(--_navigation-drawer-item-active-hover-icon-color);
    --_current-navigation-drawer-item-pressed-icon-color: var(--_navigation-drawer-item-active-pressed-icon-color);

    transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
    transition-duration: 400ms;
}

.container {
    background-color: var(--_navigation-drawer-item-container-color);
    height: var(--_navigation-drawer-item-container-height);
    width: var(--_navigation-drawer-item-container-width);

    position: relative;
    display: flex;
    align-items: center;

    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;

    padding-left: 12px;
    padding-right: 12px;

    transition-property: color, background-color, fill;
    overflow: hidden;
}

.label {
    text-align: start;
    color: var(--_navigation-drawer-item-label-text-color);
    font-family: var(--_navigation-drawer-item-label-text-font);
    line-height: var(--_navigation-drawer-item-label-text-line-height);
    font-size: var(--_navigation-drawer-item-label-text-font-size);
    letter-spacing: var(--_navigation-drawer-item-label-text-letter-spacing);
    font-weight: var(--_navigation-drawer-item-label-text-font-weight);
    margin-left: 12px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
}
.container:hover .label {
    color: var(--_navigation-drawer-item-hover-label-text-color);
}
.container:active .label {
    color: var(--_navigation-drawer-item-active-label-text-color);
}

.badge {
    --_navigation-drawer-item-badge-label-color: var(--glare-ui-navigation-drawer-item-badge-label-color, var(--_current-navigation-drawer-item-badge-label-color, var(--md-sys-color-on-surface-variant, #49454F)));
    --_navigation-drawer-item-badge-label-font: var(--glare-ui-navigation-drawer-item-badge-label-font, var(--_current-navigation-drawer-item-badge-label-font, var(--md-sys-typescale-label-large-font, Roboto)));
    --_navigation-drawer-item-badge-label-line-height: var(--glare-ui-navigation-drawer-item-badge-label-line-height, var(--_current-navigation-drawer-item-badge-label-line-height, var(--md-sys-typescale-label-large-line-height, 20px)));
    --_navigation-drawer-item-badge-label-font-size: var(--glare-ui-navigation-drawer-item-badge-label-font-size, var(--_current-navigation-drawer-item-badge-label-font-size, var(--md-sys-typescale-label-large-font-size, 14px)));
    --_navigation-drawer-item-badge-label-letter-spacing: var(--glare-ui-navigation-drawer-item-badge-label-letter-spacing, var(--_current-navigation-drawer-item-badge-label-letter-spacing, var(--md-sys-typescale-label-large-letter-spacing, 0.1px)));
    --_navigation-drawer-item-badge-label-font-weight: var(--glare-ui-navigation-drawer-item-badge-label-font-weight, var(--_current-navigation-drawer-item-badge-label-font-weight, var(--md-sys-typescale-label-large-font-weight, 500)));

    color: var(--_navigation-drawer-item-badge-label-color);
    font-family: var(--_navigation-drawer-item-badge-label-font);
    line-height: var(--_navigation-drawer-item-badge-label-line-height);
    font-size: var(--_navigation-drawer-item-badge-label-font-size);
    letter-spacing: var(--_navigation-drawer-item-badge-label-letter-spacing);
    font-weight: var(--_navigation-drawer-item-badge-label-font-weight);

    padding-left: 12px;
    padding-right: 12px;

    white-space: nowrap;
    overflow: hidden;
}

.icon {
    height: var(--_navigation-drawer-item-icon-size);
    width: var(--_navigation-drawer-item-icon-size);
    color: var(--_navigation-drawer-item-icon-color);
    fill: var(--_navigation-drawer-item-icon-color);
    --glare-ui-icon-size: var(--_navigation-drawer-item-icon-size);
    --glare-ui-icon-color: var(--_navigation-drawer-item-icon-color);
    --glare-ui-fill-color: var(--glare-ui-navigation-drawer-item-icon-fill-color, var(--_navigation-drawer-item-hover-icon-color));
    margin-left: 4px;
}
.container:hover .icon {
    color: var(--_navigation-drawer-item-hover-icon-color);
    fill: var(--_navigation-drawer-item-hover-icon-color);
    --glare-ui-icon-size: var(--_navigation-drawer-item-hover-icon-size);
    --glare-ui-icon-color: var(--_navigation-drawer-item-hover-icon-color);
    --glare-ui-fill-color: var(--glare-ui-navigation-drawer-item-hover-fill-color, var(--_navigation-drawer-item-hover-icon-color));
}
.container:active .icon {
    color: var(--_navigation-drawer-item-pressed-icon-color);
    fill: var(--_navigation-drawer-item-pressed-icon-color);
    --glare-ui-icon-size: var(--_navigation-drawer-item-pressed-icon-size);
    --glare-ui-icon-color: var(--_navigation-drawer-item-pressed-icon-color);
    --glare-ui-fill-color: var(--glare-ui-navigation-drawer-item-pressed-fill-color, var(--_navigation-drawer-item-pressed-icon-color));
}

.headline {
    --_navigation-drawer-item-headline-color: var(--glare-ui-navigation-drawer-item-headline-color, var(--_current-navigation-drawer-item-headline-color, var(--md-sys-color-on-surface-variant, #49454f)));
    --_navigation-drawer-item-headline-font: var(--glare-ui-navigation-drawer-item-headline-font, var(--_current-navigation-drawer-item-headline-font, "Roboto"));
    --_navigation-drawer-item-headline-line-height: var(--glare-ui-navigation-drawer-item-headline-line-height, var(--_current-navigation-drawer-item-headline-line-height, 20px));
    --_navigation-drawer-item-headline-size: var(--glare-ui-navigation-drawer-item-headline-size, var(--_current-navigation-drawer-item-headline-size, var(--md-sys-typescale-title-small-font-size, 14px)));
    --_navigation-drawer-item-headline-letter-spacing: var(--glare-ui-navigation-drawer-item-headline-letter-spacing, var(--_current-navigation-drawer-item-headline-letter-spacing, var(--md-sys-typescale-title-small-letter-spacing, 0.1px)));
    --_navigation-drawer-item-headline-font-weight: var(--glare-ui-navigation-drawer-item-headline-font-weight, var(--_current-navigation-drawer-item-headline-font-weight, var(--md-sys-typescale-title-small-font-weight, 500)));
    
    --_navigation-drawer-item-headline-height: var(--glare-ui-navigation-drawer-item-headline-height, var(--_current-navigation-drawer-item-headline-height, 56px));
    --_navigation-drawer-item-headline-width: var(--glare-ui-navigation-drawer-item-headline-width, var(--_current-navigation-drawer-item-headline-width, calc(100% - 32px)));
    
    height: var(--_navigation-drawer-item-headline-height);
    width: var(--_navigation-drawer-item-headline-width);

    color: var(--_navigation-drawer-item-headline-color);
    font-family: var(--_navigation-drawer-item-headline-font);
    line-height: var(--_navigation-drawer-item-headline-line-height);
    font-size: var(--_navigation-drawer-item-headline-size);
    letter-spacing: var(--_navigation-drawer-item-headline-letter-spacing);
    font-weight: var(--_navigation-drawer-item-headline-font-weight);

    margin-left: 16px;
    margin-right: 16px;

    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.divider {
    --_navigation-drawer-item-divider-height: var(--glare-ui-navigation-drawer-item-divider-height, var(--_current-navigation-drawer-item-divider-height, 0px));
    --_navigation-drawer-item-divider-color: var(--glare-ui-navigation-drawer-item-divider-color, var(--_current-navigation-drawer-item-divider-color, var(--md-sys-color-outline, #79747E)));
    --_navigation-drawer-item-divider-thickness: var(--glare-ui-navigation-drawer-item-divider-thickness, var(--_current-navigation-drawer-item-divider-thickness, 1px));
    --_navigation-drawer-item-divider-width: var(--glare-ui-navigation-drawer-item-divider-width, var(--_current-navigation-drawer-item-divider-width, calc(100% - 32px)));
    
    width: var(--_navigation-drawer-item-divider-width);

    margin-top: 0;
    margin-bottom: 0;

    margin-left: 16px;
    margin-right: 16px;

    border: var(--_navigation-drawer-item-divider-thickness) solid var(--_navigation-drawer-item-divider-color);

    position: relative;
    display: block;
}