@use '../../styles/mixins/hover';
@use '../../styles/variables';

.thy-property-operation {
    display: inline-flex;
    cursor: variables.$hand-cursor;
    align-items: center;
    position: relative;
    padding-right: 20px;

    &.thy-property-operation-disabled {
        cursor: variables.$disabled-cursor;
        pointer-events: none;
    }
    &:not(.thy-property-operation-disabled) {
        @include hover.hover {
            .btn-icon-circle.border-thick:not(:hover):not(.invalid) i,
            .btn-icon-circle.border-thick:not(:hover):not(.invalid) .wtf,
            .btn-icon-circle.border-thick:not(:hover):not(.invalid) .thy-icon,
            .btn-icon-circle.border-thick:not(:hover):not(.invalid) thy-icon {
                color: variables.$primary;
                border-color: variables.$primary;
            }

            .thy-operation-content.only-has-tips > .thy-tips {
                color: variables.$primary;
            }

            .close-link {
                visibility: visible;
            }
        }
    }

    .thy-operation-content {
        margin-left: 10px;
        position: relative;

        &.only-has-tips {
            display: flex;

            .thy-tips {
                display: flex;
                align-items: center;
                font-size: variables.$font-size-base;
            }
        }

        .thy-tips {
            color: variables.$gray-500;
            font-size: variables.$font-size-sm;
        }
    }

    .close-link {
        visibility: hidden;
        padding-left: 20px;
        display: flex;
        justify-items: center;
        align-items: center;
        // position: absolute;
        // visibility: hidden;
        // top: 14px;
        // right: -20px;
    }

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

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

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

    &-danger {
        color: variables.$danger;
    }
    &.active {
        .thy-operation-icon {
            .btn-icon-circle {
                &.border-thick {
                    .thy-icon {
                        color: variables.$primary;
                        border-color: variables.$primary;
                    }
                }
            }
        }
        .thy-tips {
            color: variables.$primary;
        }
    }
}

.thy-property-operation-group {
    display: flex;

    .thy-property-operation {
        flex-grow: 1;
        position: relative;

        &:not(:first-child) {
            padding-left: 35px;
        }

        &:not(:last-child) {
            padding-right: 40px;
        }
    }
}
