// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

@staging-events__border-color: @color-gray80;
@staging-events-duration__color: @color-gray60;
@staging-events-objects__background-color: @color-gray-darken0;
@staging-events-objects__timeline__background-color: #86de00;
@staging-events-objects__timeline__active__background-color: #77dcff;
@staging-events-objects-icon: @icon-clip__content;

//
//  Extends
//  _____________________________________________

.abs-staging-events-item {
    border-bottom: 1px solid @staging-events__border-color;
    padding: 0 0 @indent__base;
}

.abs-staging-events-count-icon {
    border-radius: 10px;
    display: inline-block;
    line-height: 2.4rem;
    padding: 0 @indent__s;

    &:before {
        &:extend(.abs-icon all);
        content: @staging-events-objects-icon;
        display: inline-block;
        font-size: 1.4rem;
        margin-right: @indent__xs;
    }
}

//
//  Staging events tooltip
//  _____________________________________________

.staging-events-actions {
    &:extend(.abs-staging-events-item all);
    margin: @indent__s 0 0;
    text-align: right;

    .action-secondary {
        margin-left: @indent__s;
    }
}

.staging-events-summary {
    &:extend(.abs-clearfix all);
    &:extend(.abs-staging-events-item all);
    margin: 0 0 1.5rem;

    dt {
        clear: left;
        float: left;
        font-weight: @font-weight__bold;
        margin: 1.5rem 0 0;
    }

    dd {
        float: left;
        margin: 1.5rem 0 0 @indent__s;

        span {
            color: @staging-events-duration__color;
        }
    }
}

.staging-events-campaign {
    &:extend(.abs-staging-events-item all);

    .items {
        margin-left: @indent__base;
    }
}

.staging-events-campaign-objects {
    margin: 0 0 @indent__s;
}

.staging-events-campaign-objects-count {
    &:extend(.abs-staging-events-count-icon all);
    background-color: @staging-events-objects__background-color;
    margin-left: @indent__s;

    .timeline-item & {
        background: @staging-events-objects__timeline__background-color;
    }

    .timeline-item._active & {
        background: @staging-events-objects__timeline__active__background-color;
    }
}

.staging-events-delete {
    margin-top: @indent__s;
    text-align: right;

    .action-delete {
        font-weight: @font-weight__regular;
    }
}
