@use 'colors';
@use 'variables';

.default-icon {
    width: variables.$icon-size-default;
    height: variables.$icon-size-default;
    color: colors.$primary-color;

    &.primary {
        color: colors.$primary-color;
    }

    &.success {
        color: colors.$success-color;
    }

    &.warning {
        color: colors.$warning-color;
    }

    &.danger {
        color: colors.$error-color;
    }

    &.info {
        color: colors.$info-color;
    }

    &.light {
        color: colors.$primary-color-border;
    }

    &.dark {
        color: colors.$color-text;
    }

    &.x-small {
        width: variables.$icon-size-extra-small;
        height: variables.$icon-size-extra-small;
    }

    &.small {
        width: variables.$icon-size-small;
        height: variables.$icon-size-small;
    }

    &.regular {
        width: variables.$icon-size-regular;
        height: variables.$icon-size-regular;
    }

    &.large {
        width: variables.$icon-size-large;
        height: variables.$icon-size-large;
    }

    &.x-large {
        width: variables.$icon-size-extra-large;
        height: variables.$icon-size-extra-large;
    }

    &.inverted:not(.square-border) {
        color: colors.$color-white;
        background: colors.$primary-color;

        svg {
            fill: colors.$color-white;
        }
    }

    &.icon-border {
        padding: variables.$spacing-s;
        border: 2px solid colors.$primary-color;
        border-radius: 50%;

        &.primary {
            border-color: colors.$primary-color;
        }

        &.success {
            border-color: colors.$success-color;
        }

        &.warning {
            border-color: colors.$warning-color;
        }

        &.danger {
            border-color: colors.$error-color;
        }

        &.info {
            border-color: colors.$info-color;
        }

        &.light {
            border-color: colors.$primary-color-border;
        }

        &.dark {
            border-color: colors.$color-text;
        }
    }

    &.inverted {
        color: colors.$color-white;

        svg {
            fill: colors.$color-white;

            rect {
                fill: colors.$primary-color;
            }

            path {
                fill: colors.$color-white;
            }
        }
    }

    svg {
        width: 100%;
        height: 100%;
    }
}

.search-container {
    width: 100%;
    justify-content: space-between;
    gap: variables.$column-gap-m;

    form {
        flex: 1;
    }
}

.table-row {
    height: variables.$table-row-height-default;
}

.no-cursor-pointer {
    cursor: default !important;
}
