/* ==========================================================================
 * Subnav
 * ========================================================================== */

.mds-c-subnav {
  --mds-t-background-color: var(--mds-t-background-color--primary);

  background-color: var(--mds-t-background-color);
  border-right: 1px solid var(--mds-t-border-color--secondary);
  display: flex;
  height: 100%;
  left: $navigation-width--sm;
  position: absolute;
  z-index: $z-index--navigation;

  &__header {
    box-shadow: var(--mds-d-elevation--3);
    flex-shrink: 0;
    padding: var(--mds-d-spacing--lg) var(--mds-d-spacing--xl);
    position: relative;
    z-index: 1;
  }

  &__title {
    @mixin mds-m-heading--size-xl;
    @mixin mds-m-text-overflow-ellipsis;

    color: var(--mds-t-text-color--primary);
    padding-bottom: var(--mds-d-spacing--xs);
    padding-top: var(--mds-d-spacing--xs);
  }
}