toggle-corp/react-store

@import '../../../../stylesheets/utils';

.segment {
    @include transition-medium;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    transform-origin: 50% 50%;
    cursor: pointer;
    min-width: var(--spacing-extra-small);
    height: 100%;

    &:hover {
        @include shadow-small;
        z-index: 10000;

        &.enlarge {
            transform: scale(1.08);
        }
    }

    .value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &:nth-child(2) {
        .value {
            left: var(--spacing-small);
            transform: translate(0, -50%);
        }
    }

    &:last-child {
        .value {
            right: var(--spacing-small);
            left: auto;
            transform: translate(0, -50%);
        }
    }
}

.tooltip {
    padding: var(--spacing-medium);
    text-transform: capitalize;
}