@studio-page-selectors-item-size: 100px;

.studio-page {
    display: flex;
    flex-direction: column;

    gap: 20px;

    .studio-page-header {
        display: flex;
        flex-direction: row;

        align-items: center;
        justify-content: center;

        padding: 10px 20px;
        gap: 10px;

        background-color: var(--background-color-accent);
        border-radius: 12px;

        font-family: "Space Grotesk", sans-serif;
        font-size: 1.5rem;
        margin: 0;

        h1 {
            margin: 0;
        }
    }

    .studio-page-selectors {
        display: flex;
        flex-direction: row;

        gap: 10px;

        width: 100px;
        height: 100px;

        .studio-page-selectors-item {
            display: flex;
            flex-direction: column;

            align-items: center;
            justify-content: center;

            width: 100%;
            height: 100%;
            max-width: @studio-page-selectors-item-size;
            max-height: @studio-page-selectors-item-size;
            min-height: @studio-page-selectors-item-size;
            min-width: @studio-page-selectors-item-size;

            padding: 20px;
            gap: 10px;

            border: 2px var(--border-color) solid;
            border-radius: 12px;

            cursor: pointer;

            transition: all 150ms ease-in-out;

            &:hover {
                background-color: var(--background-color-accent);
            }

            svg,
            span {
                margin: 0;
            }

            svg {
                font-size: 1.3rem;
            }
        }
    }
}