:root {
    --bgColor: hsl(240, 0%, 92%);
    --buttonBG: hsl(210, 9%, 32%);
    --containerBG: hsl(0, 0%, 95%);
    --buttonHover: hsl(240, 0%, 0%);
    --indicatorInactive: hsl(210, 9%, 82%);
    --indicatorActive: hsl(210, 9%, 02%);
    --column: 10;
    --magnifier: hsla(240, 0%, 100%, 40%);
    --boxShadow: 0 0px 10px hsla(0, 0%, 0%, 5%);
    --divisor: 5;
    --color: white;
}

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

body, html {
    width: 100%;
    height: 100%;
}

body {
    display: grid;
    place-content: center;
    background: var(--bgColor);
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 700,
        'GRAD' 0,
        'opsz' 48
}

.wrap {
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    justify-content: center;
    grid-gap: 20px;
}

.wrap .image-container {
    width: 500px;
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 20px;
} 

.wrap .image-container .image {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--containerBG);
    border-radius: 10px;
    padding: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--boxShadow);
}

.wrap .image-container .image .image-viewer {
    width: 100%;
    height: 100%;
    background-color: aquamarine;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    cursor: url(../assets/search.png), default;
}

.wrap .image-container .image .image-viewer .container {
    --left: 0;
    width: calc(100% * var(--column));
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: absolute;
    left: var(--left);
    top: 0;
    transition: .2s ease-in-out;
}

.wrap .image-container .image .image-viewer .container .img {
    width: calc(100% / 10);
    height: 100%;   
    position: relative;
    background-image: var(--background);
    background-size: 100% 100%;
    background-position: 0 0;
}

.wrap .image-container .image-viewer .magnifier {
    --left: 0;
    --top: 0;
    width: calc(100% / var(--divisor));
    aspect-ratio: 1/1;
    background-color: var(--magnifier);
    border-radius: 5px;
    position: absolute;
    top: var(--top);
    left: var(--left);
    z-index: 2;
    opacity: 0;
    transition: opacity .2s ease;
}

.wrap .image-container .image-viewer .magnifier:hover {
    opacity: 1;
}

.wrap .image-container .navigation {
    width: 100%;
    height: auto;
    background-color: var(--containerBG);
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding: 8px;
    border-radius: 10px;
    grid-gap: 20px;
    box-shadow: var(--boxShadow);
}

.wrap .image-container .navigation  .indicator-container {
    width: 100%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 8px;
}

.wrap .image-container .navigation .indicator-container .inactive-indicator,
.wrap .image-container .navigation .indicator-container .active-indicator {
    width: calc(100% / 10 - 7px);
    width: 12px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: relative;
    background-color: var(--indicatorInactive);
    cursor: pointer;
}

.wrap .image-container .navigation .indicator-container .active-indicator {
    --indicator-left: 0px;
    position: absolute;
    top: 50%;
    z-index: 2;
    left: var(--indicator-left);
    transform: translateY(-50%);
    background-color: var(--indicatorActive);
    width: 100%;
    transition: .2s ease-in-out;
    cursor: default;
}

.wrap .image-container .navigation button {
    width: auto;
    padding:5px 10px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    transition: .2s ease;
    background-color: var(--buttonBG);
    font-weight: 700;
    color: var(--color);
    cursor: pointer;
}

.wrap .image-container .navigation button:hover {
    background-color: var(--buttonHover);
}

.wrap .screen {
    width: 500px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    display: flex;
    position: relative;
}

.wrap .mini-screen {
    border-radius: 10px;
    width: 500px;
    padding: 8px;
    background: var(--containerBG);
    box-shadow: var(--boxShadow);
    position: absolute;
    top: var(--top);
    left: var(--left);
    top: 0;
    left: -100%;
    scale: 0;
    transition: .2s ease-in-out;
} 

.wrap .mini-image {
    border-radius: 10px;
    width: 100%;
    aspect-ratio: 1/1;
    background-image: var(--background);
    background-size: calc(100% * var(--divisor)) calc(100% * ((var(--divisor) * 0.25) * 3));
    background-position: var(--x) var(--y);

} 

.appear {
    left: 0!important;
    scale: 1!important;
}

.opacity {
    opacity: 1!important;
}