@use './text-size' as *;

@mixin button-layout($size, $borderWidth) {
    @include button-horizontal-layout($size, $borderWidth);
    @include button-vertical-layout($size, $borderWidth);
}

@mixin link-button-layout($size) {
    @include link-button-horizontal-layout($size);
    @include button-vertical-layout($size, 0);
}

@mixin button-vertical-layout($size, $borderWidth) {
    &:global(.uui-button-box) {
        min-height: $size;
        border-width: $borderWidth;
    }

    :global(.uui-caption) {
        @include text-size($size, $borderWidth);

        @if ($size == 42px or $size == 48px) {
            font-size: 16px;
        }
    }
}

@mixin button-horizontal-layout($size, $borderWidth) {
    min-width: $size;

    @if ($size == 18px) {
        @include button-padding(3px, 3px, $borderWidth);
    } @else if ($size == 24px) {
        @include button-padding(6px, 6px, $borderWidth);
    } @else if ($size == 30px) {
        @include button-padding(6px, 6px, $borderWidth);
    } @else if ($size == 36px) {
        @include button-padding(6px, 6px, $borderWidth);
    } @else if ($size == 42px) {
        @include button-padding(12px, 6px, $borderWidth);
    } @else if ($size == 48px) {
        @include button-padding(12px, 6px, $borderWidth);
    } @else {
        @include button-padding(6px, 6px, $borderWidth); }
}

@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
    padding-left: $controlPadding - $borderWidth;
    padding-right: $controlPadding - $borderWidth;

    :global(.uui-caption) {
        padding-left: $captionPadding;
        padding-right: $captionPadding;
    }
}

@mixin link-button-horizontal-layout($size) {
    min-width: $size;

    &:global(.uui-has-left-icon) :global(.uui-caption) {
        padding-left: 6px;
    }

    &:global(.uui-has-right-icon) :global(.uui-caption) {
        padding-right: 6px;
    }
}
