@import '../mixins';

@mixin button() {
    background: var(--color--global-background);
    border: 1px solid var(--color--highlight);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--color--highlight);
    cursor: pointer;
    display: inline-block;
    font-family: $font-family-base;
    font-size: 14px;
    line-height: 130%;
    margin: 0.8em 0.6em 0.8em 0;
    min-width: 100px;
    overflow: visible;
    padding: 7px 14px;
    position: relative;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;

    &:hover,
    &:active,
    &.active  {
        background-color: var(--color--highlight);
        color: var(--color--highlight-contrast);
    }

    &.disabled,
    &[disabled] {
        box-shadow: none;
        color: var(--color--font-inactive);
        background: var(--color--button-inactive-background);
        border: 1px solid var(--color--button-inactive-border);
        cursor: not-allowed;
    }

    transition: none;
}

a.button,
button.button {
    @include button;
}

.button-with-empty-icon {
    white-space: nowrap;

    &::before {
        background-repeat: no-repeat;
        content: " ";
        float: left;
        height: var(--icon-size-button);
        margin: 1px 10px 0 0;
        width: var(--icon-size-button);
    }
}

@mixin button-with-icon($icon, $role: clickable, $roleOnHover: clickable) {
    @extend .button-with-empty-icon;
    @include icon(before, $icon, $size: $icon-size-button, $padding: 8px);
}
// $button-icons is a map of class names and icon names located in resources/assets/stylesheets/scss/_variables.scss
@each $class, $icon in $button-icons {
    .button {
        &.#{'' + $class} {
            padding-right: ($icon-size-button + 8px);
            @include button-with-icon($icon);
        }
    }
}
.button.arr_right {
    &::before {
        float: right;
        margin: 1px -10px 0 5px;
    }
}

.ui-button.comment {
    @include button-with-icon(comment, clickable, info_alt);
}

/* Grouped Buttons */
.button-group {
    display: inline-flex;
    gap: 5px;
    list-style: none;
    margin: 0 0.8em;
    padding: 5px 0;
    vertical-align: middle;

    button,
    .button {
        margin: 0;
    }
}

button,
.button {
    &.as-link,
    &.styleless,
    &.undecorated,
    &.icon-button {
        background-color: unset;
        border: 0;
    }

    &.as-link,
    &.undecorated {
        cursor: pointer;
        margin: 0;
        padding: 0;
    }

    &.as-link,
    &.undecorated[formaction] {
        color: var(--base-color);
        transition: color var(--transition-duration);

        &:hover,
        &:active {
            color: var(--active-color);
            text-decoration: none;
        }

        &[disabled] {
            pointer-events: none;
        }
    }
}

label {
    &.undecorated.icon-button {
        cursor: pointer;
        .input-hidden {
            display: none;
        }
        svg {
            vertical-align: middle;
        }
    }
}

.btn-icon {
    all: unset;
    cursor: pointer;
    display: inline-block;

    // $button-icons is a map of class names and icon names located in resources/assets/stylesheets/scss/_variables.scss
    @each $name, $icon in $button-icons {
        &--#{$name} {
            @include icon(before, $icon, $align: middle);

            &.btn-icon--inline {
                @include icon(before, $icon, $align: middle, $inline: true);
            }
        }
    }
}

button.button.btn-icon--only {
    min-width: unset;
    padding: 5px;

}

.square-button-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

$square-button-size: 130px;
.square-button {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-height: $square-button-size;
    max-width: $square-button-size;
    min-width: $square-button-size;
    min-height: $square-button-size;
    margin: 10px;
    padding: 10px;
    background-color: transparent;
    color: var(--color--highlight);
    border: solid thin var(--color--tile-border);
    cursor: pointer;

    .studip-icon {
        height: 50px;
        margin-bottom: 8px;
    }
    span {
        min-width: 110px;
    }
    &:hover {
        color: var(--color--highlight-hover);
        border-color: var(--color--highlight);
    }
}