// -- Nav

nav {
    &.sheet-tabs {
        background: $l5r5e-title;
        color: $l5r5e-black;
        --notchSize: 0.5rem;
        clip-path: polygon(
            0% var(--notchSize),
            var(--notchSize) 0%,
            calc(100% - var(--notchSize)) 0%,
            100% var(--notchSize),
            100% calc(100% - var(--notchSize)),
            calc(100%) 100%,
            var(--notchSize) 100%,
            0% calc(100%)
        );
    }
    .item {
        &:hover {
            background-color: rgba(0, 0, 0, 0.75);
            color: rgba(255, 255, 255, 1);
            text-shadow: black 1px 2px 0;
        }
    }
    .item.active {
        height: 2.5rem;
        line-height: 2rem;
        background-color: rgba(73, 12, 11, 0.85);
        color: rgba(255, 255, 255, 1);
        background-color: rgba(73, 12, 11, 0.85);
        clip-path: polygon(
            0% var(--notchSize),
            var(--notchSize) 0%,
            calc(100% - var(--notchSize)) 0%,
            100% var(--notchSize),
            100% 100%,
            0 100%,
            0% 0%,
            0% 100%
        );

        &:hover {
            background-color: rgba(73, 12, 11, 0.85);
            cursor: default;
        }
    }
}