/*
================================================

Space Vanta Theme 1.0

Featured Function:
Find

Module:
Cube / Inner Box / Geometry

File:
public/header/featured-functions/find/cube/inner-box/geometry.css

Version:
FIND-INNER-BOX-GEOMETRY-003

Purpose:
Independent Inner Geometric Box

Responsibilities:
- Inner Box geometry field
- Inner Box dimensions
- 3D surface construction
- Shared spatial axis
- Central positioning
- Controlled depth

Does NOT handle:
- Material
- Color
- Shadow
- Visibility
- Hover
- Animation
- Transition
- Interaction
- Panel
- Discovery

================================================
*/


/* =================================================
   01. INNER BOX FIELD
================================================= */

.sv-find-inner-box {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    display:
        block;

    width:
        18px;

    height:
        18px;

    box-sizing:
        border-box;

    transform-style:
        preserve-3d;

    transform-origin:
        center center;

    translate:
        -50% -50% 10px;

}


/* =================================================
   02. SHARED SURFACE FIELD
================================================= */

.sv-find-inner-box__surface {

    position:
        absolute;

    left:
        0;

    top:
        0;

    display:
        block;

    width:
        18px;

    height:
        18px;

    box-sizing:
        border-box;

    transform-style:
        preserve-3d;

    transform-origin:
        center center;

}


/* =================================================
   03. TOP
================================================= */

.sv-find-inner-box__surface--top {

    transform:
        rotateX(90deg)
        translateZ(9px);

}


/* =================================================
   04. LEFT
================================================= */

.sv-find-inner-box__surface--left {

    transform:
        rotateY(-90deg)
        translateZ(9px);

}


/* =================================================
   05. RIGHT
================================================= */

.sv-find-inner-box__surface--right {

    transform:
        rotateY(90deg)
        translateZ(9px);

}


/* =================================================
   06. FRONT
================================================= */

.sv-find-inner-box__surface--front {

    transform:
        translateZ(9px);

}


/* =================================================
   07. INNER CORE
================================================= */

.sv-find-inner-box__core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    display:
        block;

    width:
        7px;

    height:
        7px;

    box-sizing:
        border-box;

    transform:
        translate3d(
            -50%,
            -50%,
            4px
        );

    transform-style:
        preserve-3d;

}


/* =================================================
   08. DESKTOP
========================================================= */

@media (min-width: 768px) {

    .sv-find-inner-box {

        width:
            18px;

        height:
            18px;

        translate:
            -50% -50% 10px;

    }


    .sv-find-inner-box__surface {

        width:
            18px;

        height:
            18px;

    }


    .sv-find-inner-box__surface--top {

        transform:
            rotateX(90deg)
            translateZ(9px);

    }


    .sv-find-inner-box__surface--left {

        transform:
            rotateY(-90deg)
            translateZ(9px);

    }


    .sv-find-inner-box__surface--right {

        transform:
            rotateY(90deg)
            translateZ(9px);

    }


    .sv-find-inner-box__surface--front {

        transform:
            translateZ(9px);

    }

}


/* =================================================
   09. MOBILE
========================================================= */

@media (max-width: 767px) {

    .sv-find-inner-box {

        width:
            16px;

        height:
            16px;

        translate:
            -50% -50% 9px;

    }


    .sv-find-inner-box__surface {

        width:
            16px;

        height:
            16px;

    }


    .sv-find-inner-box__surface--top {

        transform:
            rotateX(90deg)
            translateZ(8px);

    }


    .sv-find-inner-box__surface--left {

        transform:
            rotateY(-90deg)
            translateZ(8px);

    }


    .sv-find-inner-box__surface--right {

        transform:
            rotateY(90deg)
            translateZ(8px);

    }


    .sv-find-inner-box__surface--front {

        transform:
            translateZ(8px);

    }


    .sv-find-inner-box__core {

        width:
            6px;

        height:
            6px;

        transform:
            translate3d(
                -50%,
                -50%,
                3px
            );

    }

}