.xs {
    width: var(--static-space-20);
    height: var(--static-space-20);
    min-width: var(--static-space-20);
    min-height: var(--static-space-20);
}

.s {
    width: var(--static-space-24);
    height: var(--static-space-24);
    min-width: var(--static-space-24);
    min-height: var(--static-space-24);
}

.m {
    width: var(--static-space-32);
    height: var(--static-space-32);
    min-width: var(--static-space-32);
    min-height: var(--static-space-32);
}

.l {
    width: var(--static-space-48);
    height: var(--static-space-48);
    min-width: var(--static-space-48);
    min-height: var(--static-space-48);
}

.xl {
    width: var(--static-space-160);
    height: var(--static-space-160);
    min-width: var(--static-space-160);
    min-height: var(--static-space-160);

    .position {
        bottom: var(--static-space-16);
        right: var(--static-space-16);
    }
}

.value {
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

.indicator {
    box-sizing: content-box;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(var(--static-space-2)) translateY(var(--static-space-2));
}

.image {
    object-position: center;
}