@use 'sass:color';

/*
    <button
        class="icon-button icon-button--danger"
    >
        <svg src="icons/Trash.svg" />
    </button>
*/
@mixin create-icon-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
    border-color: $base-col-80;
    background-color: $base-col-05;

    &:focus, &:hover {
        border-color: $base-col;
        background-color: $base-col-30;
    }

    &:active {
        background-color: $base-col-20;
    }
}

$icon-button-size: 56 - ($border-width-thickness-num * 2);

.icon-button {
    @include set-color($color-text-dim);
    @include trans-colors-border;

    display: flex;
    align-items: center;
    justify-content: center;
    width: space($icon-button-size);
    min-width: space($icon-button-size);
    max-width: space($icon-button-size);
    height: space($icon-button-size);
    min-height: space($icon-button-size);
    max-height: space($icon-button-size);
    border-width: $border-width-thickness;
    border-radius: space($icon-button-size * 0.5);
    border-color: $color-transparent;
    background-color: $color-transparent;

    &:focus, &:hover {
        @include set-color($color-text);
        background-color: $color-border;
    }

    &:active {
        @include set-color($color-text-active);
        background-color: $color-border-soft;
    }

    &:disabled,&[disabled] {
        @include set-color($color-text-dim);
        opacity: 0.5;
    }

    &:not([disabled]) {
        @extend %nav-all;
        cursor: pointer;
    }

    svg {
        width: space(32);
        height: space(32);
    }

    &--primary {
        @include create-icon-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
    }

    &--secondary {
        @include create-icon-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
    }

    &--tertiary {
        @include create-icon-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
    }

    &--success {
        @include create-icon-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
    }

    &--danger {
        @include create-icon-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
    }

    &--warning {
        @include create-icon-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
    }
}
