/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

.menu {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1;
    margin-top: 0.5rem;
    background-color: #fff;
    box-shadow: 0 1.2rem 1.4rem 0 rgba(75, 69, 61, 0.22)
}

.menu.left {
        margin-top: calc(0.5rem * 2 + calc(1.2rem / 2))
    }

.menu.right {
        margin-top: calc(0.5rem * 2 + calc(1.2rem / 2))
    }

.menu.center {
        margin-top: calc(0.5rem * 2 + calc(1.2rem / 2))
    }

.menu.left::before {
            content: "";
            position: absolute;
            top: calc(1.2rem / 2 * -1);
            width: 1.2rem;
            height: 1.2rem;
            z-index: -1;
            transform: rotateZ(45deg);
            border: 1px solid rgba(75, 69, 61, 0.08);
            background-color: #fff;
        }

.menu.right::before {
            content: "";
            position: absolute;
            top: calc(1.2rem / 2 * -1);
            width: 1.2rem;
            height: 1.2rem;
            z-index: -1;
            transform: rotateZ(45deg);
            border: 1px solid rgba(75, 69, 61, 0.08);
            background-color: #fff;
        }

.menu.center::before {
            content: "";
            position: absolute;
            top: calc(1.2rem / 2 * -1);
            width: 1.2rem;
            height: 1.2rem;
            z-index: -1;
            transform: rotateZ(45deg);
            border: 1px solid rgba(75, 69, 61, 0.08);
            background-color: #fff;
        }

.menu.left::before {
        left: 1.5rem;
    }

.menu.right::before {
        right: 1.5rem;
    }

.menu.center::before {
        left: 50%;
        transform: translateX(-50%) rotateZ(45deg);
    }