/* Style the patterns of tools list */
.AppPatternsTools {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;

    position: relative;
    right: 0px;
    z-index: 76;
}

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

        background: rgb(255, 255, 255);
        border: 1px solid rgb(237, 237, 237);
        border-radius: var(--size-07);

        position: absolute;
        top: calc( var(--size-17) * 1.15 );
        right: 0px;
        z-index: 1;

        width: 100%;
        min-width: var(--size-120);

        transition: 0.4s;
        box-shadow: 0px 7px 77px rgba(57, 57, 57, 0.1);
    }

        .AppPatternsTools__Links > button,
        .AppPatternsTools__Links > a {
            justify-content: flex-start;

            width: 100%;

            padding-top: var(--size-05);
            padding-bottom: var(--size-05);
            padding-left: var(--size-07);
            padding-right: var(--size-07);

            transition: 0.4s;
        }

            .AppPatternsTools__Links > button:hover,
            .AppPatternsTools__Links > a:hover {
                transition: 0.2s;
                background: rgb(245, 245, 245);
                color: rgb(57, 57, 57);
            }

            .AppPatternsTools__Links > button:first-child,
            .AppPatternsTools__Links > a:first-child {
                border-top-left-radius: var(--size-07);
                border-top-right-radius: var(--size-07);
            }

            .AppPatternsTools__Links > button:last-child,
            .AppPatternsTools__Links > a:last-child {
                border-bottom-left-radius: var(--size-07);
                border-bottom-right-radius: var(--size-07);
            }

            .AppPatternsTools__Links > button > img,
            .AppPatternsTools__Links > a > img {
                margin-right: var(--size-04);
            }