// 1. Get ready for position of corner elements and group separator.
//
// 2. Icon buttons should appear as squares, that's why width and height is equal here.
//
// 3. Use original padding to restore square buttons back to their size.

@use "sass:list";
@use "sass:map";
@use "../../styles/tools/accessibility";
@use "../../styles/tools/transition";
@use "settings";
@use "theme";

// 2.
@mixin _button-square() {
    --rui-local-padding: 0;
    --rui-local-width: var(--rui-local-height);
}

// 3.
@mixin _button-size-restore() {
    --rui-local-padding: var(--rui-local-padding-original);
    --rui-local-width: unset;
}

@mixin button() {
    @include transition.add((opacity, color, border-color, background-color, box-shadow));

    position: relative; // 1.
    display: inline-flex;
    column-gap: settings.$icon-spacing;
    align-items: center;
    justify-content: center;
    width: var(--rui-local-width, auto);
    min-height: var(--rui-local-height, auto);
    padding: var(--rui-local-padding);
    font: theme.$font-weight list.slash(var(--rui-local-font-size), settings.$line-height) settings.$font-family;
    letter-spacing: theme.$letter-spacing;
    text-align: center;
    text-decoration: none;
    text-transform: theme.$text-transform;
    vertical-align: middle;
    color: var(--rui-local-color);
    border: theme.$border-width solid var(--rui-local-border-color, transparent);
    border-radius: theme.$border-radius;
    background: var(--rui-local-background, transparent);
    box-shadow: var(--rui-local-box-shadow, none);
    user-select: none;
    cursor: pointer;

    &:hover,
    &:focus {
        text-decoration: none;
    }

    &:disabled {
        opacity: theme.$disabled-opacity;
        cursor: theme.$disabled-cursor;
    }
}

@mixin button-size($size) {
    $properties: map.get(theme.$sizes, $size);

    --rui-local-height: #{map.get($properties, height)};
    --rui-local-padding: #{map.get($properties, padding-y)} #{map.get($properties, padding-x)};
    --rui-local-padding-original: #{map.get($properties, padding-y)} #{map.get($properties, padding-x)}; // 3.
    --rui-local-font-size: #{map.get($properties, font-size)};
}

@mixin hide-label() {
    @include _button-square();

    .label {
        @include accessibility.hide-text();
    }
}

@mixin show-label() {
    @include _button-size-restore();

    .label {
        @include accessibility.unhide-text();
    }
}