@mixin set-size($padding-left, $padding-right, $min-width) {
    &:global(.uui-button-box) {
        min-width: $min-width;
    }

    :global(.uui-caption) {
        font-family: var(--uui-pagination-font);
        font-weight: var(--uui-pagination-font-weight, normal);
        font-size: 14px;
        padding-left: $padding-left;
        padding-right: $padding-right;
    }

    &:first-of-type {
        margin-right: 6px;
    }

    &:last-of-type {
        margin-left: 6px;
    }
}

.root {
    display: flex;
    flex-direction: row;

    .spacer {
        color: var(--uui-text-primary);
    }

    .mode-ghost {
        color: var(--uui-text-primary);

        &:hover {
            color: var(--uui-primary);
        }
    }

    .size-24 {
        @include set-size(2px, 2px, 24px);

        &.spacer {
            min-width: 28px;
        }
    }

    .size-30 {
        @include set-size(5px, 5px, 30px);

        &.spacer {
            min-width: 34px;
        }
    }

    .navigation-size-24 {
        @include set-size(0, 0, 24px);
    }

    .navigation-size-30 {
        @include set-size(0, 0, 30px);
    }
}

