@layer base {
    #canvas-container {
        align-items: center;
        background: #000;
        display: flex;
        height: 100vh;
        justify-content: center;
        overflow: hidden;
        width: 100%;
    }

    #canvas-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .optics-card {
        display: none;
    }

    .optics-card.active {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 20px;
    }

    @media screen and (min-width: 1280px) {
        .optics-card.active {
            flex-direction: row;
        }
    }

    .strike-mounting-button,
    .optics-button {
        @apply
        button-sm
        border-white
        border
        text-white
        hover:bg-tlx-white-outline-hover;
    }

    .strike-mounting-button.active,
    .optics-button.active {
        @apply
        button-sm
        bg-tlx-blue
        border-transparent
        text-white;
    }
}