$header-height: 80px;

#audio-requirements .tooltip-inner {
    max-width: 400px;
}

#transcription-shortcuts .tooltip-inner {
    max-width: 700px;
}

.FormFieldRadio {
    font-size: 14px;

    .form-check {
        margin-bottom: 4px;
    }
}

.NoLink {
    color: inherit;
    text-decoration: none;

    &:hover {
        color: inherit;
        text-decoration: none;
    }
}

.breadcrumb {
    font-size: 12px;
}

.App {

    .BreadcrumbContent {
        align-self: center;
    }
}

@mixin circle($size, $circle-color: var(--gray-200), $svg-color: var(--gray-600), $border-color: none) {
    align-items: center;
    background-color: $circle-color;
    border: solid 1px $border-color;
    border-radius: 50%;
    display: flex;
    height: $size;
    justify-content: center;
    width: $size;

    svg {
        fill: $svg-color;
        stroke: $svg-color;
    }
}

@mixin spinner($size) {
    animation: spinner 0.75s infinite linear;
    border: 3px solid var(--gray-200);
    border-left: 3px solid var(--blue);
    border-radius: 50%;
    height: $size;
    width: $size;
}

@mixin ellipse($lines) {
    -webkit-box-orient: vertical;
    display: box;
    -webkit-line-clamp: $lines;
    overflow: hidden;
}

@mixin insights-breadcrumb {

    .BreadcrumbContent {

        li:first-child > span::after {
            content: ">";
            display: inline-block;
            padding: 0 1em;
            color: var(--gray-500);
        }
    }

}

.Spinner {
    @include spinner(20px);
}

.LargeSpinner {
    @include spinner(40px);
}

@keyframes spinner {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

.AppHeader {
    align-items: center;
    background-color: white;
    border-bottom: 1px solid var(--gray-100);
    box-shadow: 0 4px 2px -2px rgb(0 0 0 / 20%);
    display: flex;
    height: $header-height;
    justify-content: space-between;
    padding-left: 25px;
    padding-right: 25px;
    position: sticky;
    top: -15px;
    margin: -15px -15px 40px;
    z-index: 3;
}

.PreRoll-dot {
    @include circle(15px, var(--indigo));
}

.MidRoll-dot {
    @include circle(15px, var(--red));
}

.PostRoll-dot {
    @include circle(15px, var(--cyan));
}

@mixin tabs($color, $fontSize) {

    &-tabs {
        display: flex;
    }

    &-tab {
        font-size: $fontSize;
        font-weight: 500;
        margin-right: 40px;
        padding-bottom: 5px;
        text-transform: uppercase;
    }

    &-tab-active {
        border-bottom: 2px solid var(--color);
        color: var(--gray-900);
    }

    &-tab-inactive {
        color: var(--gray-600);
    }

    &-tab-inactive:hover {
        color: var(--gray-700);
        cursor: pointer;
    }

}

@mixin chart-change {

    &-new-badge {
        color: var(--white);
        background-color: var(--blue);
        text-transform: uppercase;
        font-size: 10px;
        font-weight: bold;
        border-radius: 2px;
        display: inline-flex;
        letter-spacing: 1px;
        padding-top: 2px;
        padding-bottom: 1px;
        padding-left: 4px;
        padding-right: 4px;
    }

    &-negative-change {
        color: var(--red);
        font-size: 14px;

        .ArrowDown {
            fill: var(--red);
        }
    }

    &-positive-change {
        color: var(--green);
        font-size: 14px;

        .ArrowUp {
            fill: var(--green);
        }
    }

}

.Country-option {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 3px;
}

.Country-option-name {
    margin-left: 8px;
}

.Store-option {

    &-name {
        margin-left: 5px;
    }

    .Stores {
        width: 18px;
        height: 18px;
    }
}

#intercom-help-icon {
    justify-content: center;
}