@import '~@capillarytech/cap-ui-library/styles/_variables';

.reachability-summary {
    &--card {
        border: 0.071rem solid $CAP_G07;
        border-radius: 0.5rem;
        background: $CAP_WHITE;
        padding: 1.5rem;
    }

    .not-reachable-info-icon {
        margin-left: $CAP_SPACE_12;
    }

    &__title {
        margin-bottom: $CAP_SPACE_16;
    }

    &__title--compact {
        margin-bottom: $CAP_SPACE_12;
    }

    &__percent-of-total {
        display: block;
        margin-top: $CAP_SPACE_04;
    }

    &__campaign-row {
        margin: $CAP_SPACE_24 0;
    }

    &__stat-row {
        margin-bottom: $CAP_SPACE_20;
    }

    &__divider {
        margin: $CAP_SPACE_16 0;
    }

    &__value-column {
        justify-content: flex-end;
    }

    &__inline-value {
        margin-left: $CAP_SPACE_08;
    }

    &__channels-heading {
        margin-bottom: 1.214rem;
    }

    &__processing-label {
        margin-left: $CAP_SPACE_04;
    }

    &__channel-icon {
        margin-right: $CAP_SPACE_08;
    }

    &__channel-row:not(:first-child) {
        margin-top: 1rem;
    }

    &__not-reachable-note {
        padding-bottom: $CAP_SPACE_08;
    }

    &__not-reachable-count-column {
        text-align: right;
    }

    &__refresh-info {
        margin-top: $CAP_SPACE_16;
    }

    &__toggle {
        display: inline-block;
        margin-top: $CAP_SPACE_08;
        cursor: pointer;
    }

    &__refresh-footer {
        margin: $CAP_SPACE_20 -1.5rem -1.5rem;
        padding: $CAP_SPACE_12 1.5rem;
        background: $BG_01;
        border-top: 0.071rem solid $CAP_G07;
        border-radius: 0 0 0.5rem 0.5rem;
    }

    &__refresh-footer-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        color: $CAP_G03;

        &:disabled {
            color: $CAP_G05;
        }
    }
}

.not-reachable-tooltip {
    .category-details {
        margin-top: $CAP_SPACE_16;
        position: relative;

        &::before {
            content: '';
            width: $CAP_SPACE_12;
            height: 0.071rem;
            background: $CAP_G04;
            position: absolute;
            top: 45%;
        }

        .category-details-row {
            margin-left: $CAP_SPACE_18;

            .reachable-category-percentage {
                margin-left: $CAP_SPACE_04;
            }
            .not-reachable-category-count {
                margin-left: $CAP_SPACE_08;
            }
        }
    }

    .not-reachable-reasons{
        position: relative;
        margin-left: $CAP_SPACE_04;
        &::before {
            position: absolute;
            width: 0.071rem;
            height: 100%;
            content: '';
            background: $CAP_G04;
            margin-right: $CAP_SPACE_12;
            top: -$CAP_SPACE_12;
        }
    }
}