/*!
 * SPDX-FileCopyrightText: 2017-2024 Enedis
 *
 * SPDX-License-Identifier: Apache-2.0
 *
 */

.badge-container {
    display: inline-block;
    margin: 10px 0 5px 20px;
}

.report-header {
    z-index: 1021; // > bootstrap sticky-top default z-index

    .btn:focus {
        box-shadow: none;
    }
}

.error {
    color: var(--bs-red);
}

.report-raw {

    .collapse {
        &:not(.show) {
            display: none !important;
        }
    }

    .report-bg {
        background-color: var(--chutney-report-bg-color) !important;
    }

    .report-raw-left {
        cursor: default;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .report-raw-right {
        overflow-x: hidden;
    }

    .resize {
        cursor: col-resize;

        &.resizing {
            border-left-style: double;
            border-right-style: double;
        }
    }

    .resizing {
        cursor: col-resize;
    }

    .step-header {
        overflow-x: hidden;
    }

    .step-header-success {
        color: var(--bs-green);
    }
    .step-header-failure {
        color: var(--bs-red);
    }
    .step-header-stopped {
        color: var(--bs-gray-600);
    }
    .step-header-not-executed {
        color: var(--bs-gray-600);
    }

    .step-info {
        color: var(--bs-cyan);
    }
    .step-error {
        color: var(--bs-red);
    }

    .copy-row {
        .copy {
            visibility: hidden;
        }

        &:hover {
            .copy {
                visibility: visible;
                cursor: pointer;
            }
        }
    }

    .hr-text {
        text-align: center;
        background-color: var(--chutney-report-bg-color);
    }
}

hr {
    margin: 0;
}

.hr-fa {
    color: #818078;
}

.hr-text {
    position: relative;
    outline: 0;
    border: 0;
    text-align: start;
    &:before {
      content: '';
      // use the linear-gradient for the fading effect
      // use a solid background color for a solid bar
      background: linear-gradient(to right, transparent, #818078, transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
    }
    &:after {
      content: attr(data-content);
      position: relative;
      display: inline-block;

      padding: 0 .5em;
      // this is really the only tricky part, you need to specify the background color of the container element...
      background-color: var(--bs-body-bg);
    }
  }

.ctx-var {
    .action {
        visibility: hidden;
    }

    &:hover {
        .action {
            visibility: visible;
            cursor: pointer;
        }
    }
}
