.AppPatternsOptions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    position: relative;
    z-index: 1;

    width: 100%;
    max-width: calc( var(--size-7) * 2 );
}

    .AppPatternsOptions__Selected {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        background: rgb(255, 255, 255);
        border: 0.017cm solid rgb(217, 217, 217);
        border-radius: var(--size-07);

        font-size: var(--font-size);

        width: 100%;

        padding: var(--size-07);

        transition: 0.4s;
    }

        .AppPatternsOptions__Selected:hover {
            transition: 0.2s;
            background: rgb(245, 245, 245);
        }

        .AppPatternsOptionsSelected__Value {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;

            font-weight: 600;
            text-align: center;

            width: 100%;

            margin-right: var(--size-04);
        }

        .AppPatternsOptionsSelected__Icon {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

            .AppPatternsOptionsSelected__Icon > i {
                font-size: var(--font-size-h4);
            }

    .AppPatternsOptions__Links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        background: rgb(255, 255, 255);
        border-left: 0.017cm solid rgb(217, 217, 217);
        border-right: 0.017cm solid rgb(217, 217, 217);
        border-bottom: 0.017cm solid rgb(217, 217, 217);
        border-bottom-left-radius: var(--size-07);
        border-bottom-right-radius: var(--size-07);

        position: absolute;
        top: calc( ( var( --size-07 ) * 2.2 ) + var( --font-size ) );
        z-index: 1;

        overflow-y: auto;

        width: 100%;
        max-height: calc( var(--size-7) * 1.05 );
    }

        .AppPatternsOptions__Links > button {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            background: unset;
            border: unset;

            outline: unset;

            color: rgb(97, 97, 97);
            font-size: var(--font-size);
            font-weight: 500;
            
            width: 100%;
            
            padding: var(--size-07);

            transition: 0.4s;
        }

            .AppPatternsOptions__Links > button:hover {
                transition: 0.2s;
                background: rgb(235, 235, 235);
            }

/* THE TEMPLATE */
/* <div class="AppPatternsOptions">
    <div class="AppPatternsOptions__Selected">
        <div class="AppPatternsOptionsSelected__Value">В плане</div>
        <div class="AppPatternsOptionsSelected__Icon">
            <i class="icon-caret-down"></i>
        </div>
    </div>
    <div class="AppPatternsOptions__Links">
        <button>В плане</button>
        <button>В работе</button>
        <button>На проверке</button>
        <button>Готово</button>
    </div>
</div> */