@mixin table-circle {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

@mixin set-ad-points {
    padding-bottom: 40px;

    #overview-container {
        background-color: var(--gray-100);
        height: 50px;
        margin-bottom: 30px;
    }

    &-view-overview#overview-container {
        height: 169px;
    }

    #zoomview-container {
        background-color: var(--gray-100);
    }

    &-table {
        font-size: 14px;
        margin-top: 30px;
    }

    &-title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    &-description {
        color: var(--gray-700);
        font-size: 15px;
        margin-bottom: 20px;
    }

    &-button {
        margin-right: 13px;
    }

    &-control-bar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 22px;
        padding-top: 20px;

        .Glyph.CheckmarkGlyph {
            fill: white;
        }
    }

    &-zoom-controls {
        align-items: center;
        display: flex;
    }

    &-zoom-level {
        border-bottom: solid 1px var(--gray-300);
        height: 1px;
        margin-left: 12px;
        margin-right: 12px;
        position: relative;
        width: 40px;
    }

    &-zoom-level-notch {
        background-color: var(--gray-300);
        height: 10px;
        position: absolute;
        top: -6px;
        width: 1px;
    }

    &-zoom-level-notch-active {
        background-color: var(--gray-700);
        height: 12px;
        width: 2px;
    }

    &-zoom-level-notch:nth-child(1) {
        left: 0;
    }

    &-zoom-level-notch:nth-child(2) {
        left: 10px;
    }

    &-zoom-level-notch:nth-child(3) {
        left: 20px;
    }

    &-zoom-level-notch:nth-child(4) {
        left: 30px;
    }

    &-zoom-level-notch:nth-child(5) {
        left: 40px;
    }

    &-circle-mid {
        @include circle(15px, var(--red));
        @include table-circle;
    }

    &-circle-pre {
        @include circle(15px, var(--indigo));
        @include table-circle;
    }

    &-circle-post {
        @include circle(15px, var(--cyan));
        @include table-circle;
    }

    &-empty-state {
        align-items: center;
        background-color: var(--gray-100);
        display: flex;
        flex-direction: column;
        margin: 40px;
        margin-bottom: 0;
    }

    &-empty-state-title {
        font-size: 24px;
        margin-bottom: 5px;
        margin-top: 25px;
    }

    &-empty-state-description {
        color: var(--gray-600);
        font-size: 13px;
        margin-bottom: 15px;
    }

    &-set-ad-locations-button {
        margin-bottom: 50px;
        margin-top: 30px;
    }

    &-table-no-locations {
        color: var(--gray-500);
        font-size: 14px;
        margin-top: 40px;
        text-align: center;
    }

    &-manual-add {
        margin-top: 40px;
    }

    &-description-ad-info {
        display: flex;
        justify-content: space-between;
    }
}

.SetAdPoints {
    @include set-ad-points;
}

/* stylelint-disable no-descending-specificity */

.table {

    .SetAdPoints-table-type {
        padding: 20px 0;
        width: 80%;
    }

    .SetAdPoints-table-type-shorter {
        width: 70%;
    }

    .SetAdPoints-table-time {
        padding: 20px 0;
        text-align: right;
        width: 10%;
    }

    .SetAdPoints-table-count {
        padding: 20px 0;
        text-align: right;
        width: 10%;
    }

    .SetAdPoints-table-delete {
        padding: 20px 0;
        text-align: right;
        width: 10%;

        .Glyph.TrashGlyph {
            cursor: pointer;
            fill: var(--gray-900);

            &:hover {
                fill: var(--gray-800);
            }
        }
    }
}