
// @include keyframes-vex-flyin
// @include keyframes-vex-flyout
@include keyframes-vex-fadein
@include keyframes-vex-fadeforward
@include keyframes-vex-fadebackward
// @import keyframes


#modal-holder .package-modal {
    border: 0 none;
    font-family: 'Roboto', sans-serif;
    padding: 0;
    outline: none;
    text-align: left;
    width: 600px;

    &.deletion-modal {
        overflow: hidden;
    }

    &.placement-choice-modal {
        width: 800px;
    }

    .loading-animation {
        display: none;
        margin-top: 18px;

        .loader {
            position: relative;
            margin: 0px auto;
            width: 150px;

            &:before {
                content:'';
                display: block;
                padding-top: 100%;
            }

            .circular {
                animation: rotate 2s linear infinite;
                height: 100%;
                margin: auto;
                opacity: 0;
                position: absolute;
                top: 0; bottom: 0; left: 0; right: 0;
                transform-origin: center center;
                width: 100%;

                transition: opacity 750ms ease-in-out;

                .path {
                    animation: dash 1.5s ease-in-out infinite;
                    stroke: #FFFFFF;
                    stroke-dasharray: 1,200;
                    stroke-dashoffset: 0;
                    stroke-linecap: round;
                }
            }

            .fa {
                color: #FFFFFF;
                font-size: 60px;
                left: 50%;
                line-height: 80px;
                margin-left: -40px;
                margin-top: -40px;
                position: absolute;
                text-align: center;
                top: 50%;
                width: 80px;
            }
        }

        .loading-text {
            color: #FFFFFF;
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 1.5rem;
            margin: 0;
            opacity: 0;
            padding-top: 2rem;
            text-align: center;

            transition: opacity 750ms ease-in-out;
        }

        &.active {
            .loader {
                .circular {
                    opacity: 1;
                }
            }

            .loading-text {
                opacity: 1;
            }
        }
    }

    &.waiting-transition {
        border-style: solid;
        border-width: 3px;

        &.delete-waiting-transition {
            border-color: darken($delete-action-color, 21%);
        }

        &.save-waiting-transition {
            border-color: darken($save-action-color, 21%);
        }

        .modal-inner {
            // visibility: hidden;
        }
    }

    &.waiting {
        border-radius: 50%;
        height: 300px;
        // margin-top: -150px;
        // top: calc(50vh - 160px) !important;
        width: 300px;

        .modal-inner {
            display: none;
        }

        .loading-animation {
            display: block;
            padding-bottom: 75px;
        }
    }

    &.waiting-transition,
    &.waiting {
        transition-duration: 0.75s !important;
        transition-timing-function: cubic-bezier(.4,0,.5,1);
    }

    &.delete-waiting {
        background-color: darken($delete-action-color, 21%);

        &.waiting-transition,
        &.waiting {
            border-color: darken($delete-action-color, 24%);
            border-style: solid;
            border-width: 3px;
        }
    }

    &.save-waiting {
        background-color: darken($save-action-color, 21%);

        &.waiting-transition,
        &.waiting {
            border-color: darken($save-action-color, 24%);
        }
    }

    &.delete-waiting,
    &.save-waiting {
        &.waiting-transition,
        &.waiting {
            border-style: solid;
            border-width: 3px;
        }
    }

    .modal-inner {
        form {
            padding: 0;
            position: relative;

            .row {
                padding: 0.5rem 1rem 1rem;
            }
        }

        .time-picker {
            position: absolute;
            top: 40px;
            z-index: 1234;
        }

        .date-range-picker {
            left: 10px;
            position: absolute;
            top: 55px;

            .dr-picker {
                z-index: 1234;

                .top-bar {
                    & > div {
                        width: auto !important;
                    }

                    input[type='button'] {
                        background: #00AAEE;
                        border: 1px solid #0076A3;
                        border-radius: 4px;
                        box-shadow: inset -1px -2px 6px #006699;
                        color: #FFFFFF;
                        font-size: 12px;
                        height: auto;
                        line-height: 1rem;
                        margin: 0;
                        padding: 3px 5px;
                        width: auto;
                    }
                }
            }
        }

        #package-web-info {
            .date-range-picker {
                top: 35px;
            }
        }
    }

    h1 {
        background: #275F7F;
        border: 0 none;
        color: #FFFFFF;
        font-size: 24px;
        font-weight: 400;
        height: auto;
        line-height: 44px;
        margin: 0 0 20px;
        padding: 6px 18px;
    }

    .form-radio,
    .form-group {
        margin-bottom: $default-gap;
        margin-top: $default-gap;
        padding: 0 ($default-gap / 2);
        position: relative;

        &.publication-group {
            margin-bottom: 0;
        }
    }

    .mode-toggle {
        display: none;
    }

    .modes {
        .edit {
            display: none;
        }

        .read-only {
            background: #FEFDF4;
            border: 1px solid #C0C0C0;
            font-family: 'Roboto Mono', monospace;
            font-size: 16px;
            line-height: 32px;
            margin: 24px;
            padding: 8px 12px 8px 24px;

            &.ruled {
              background: linear-gradient(90deg, rgba(0,0,0,0) 12px, rgb(247,169,158) 12px, rgb(247,169,158) 15px, rgba(0,0,0,0) 15px), linear-gradient(0, rgb(233,233,233) 0.09em, rgba(0,0,0,0) 0.01em), rgb(254, 253, 244);
              background-repeat: repeat, repeat;
              background-size: 100% 1.2em, 100% 32px;
              background-clip: border-box, border-box;
              background-origin: padding-box, padding-box;
            }

            br {
                content: '';
                display: block;
                font-size: 0;
                height: 32px;
                margin: 0;
                width: 100%;
            }

            p {
                font-size: 14px;
                line-height: 24px;
                margin: 0;
                padding-bottom: 12px;
            }
        }
    }

    // label {
    //     color: #727272;
    //     display: block;
    //     font-size: 12px;
    //     font-weight: 700;
    //     line-height: 12px;
    //     margin: 0;
    //     padding-bottom: 12px;
    //     padding-top: 16px;
    //     text-indent: 3px;
    // }

    .control-label {
        color: $default-label-color;
        font-size: $default-font-size;
        font-weight: normal;
        line-height: $default-font-size;
        padding-left: $default-spacer;
        pointer-events: none;
        position: absolute;
        top: ($default-font-size / 4);
        z-index: 1;

        transition: all $default-transition-speed ease;

        .required-marker {
            margin-left: ($default-font-size / 10);
        }
    }

    input,
    textarea {
        background: none;
        border-color: transparent;
        border-width: 0;
        box-shadow: none;
        color: transparent;
        display: block;
        font-size: $default-font-size;
        line-height: 1.9375rem;
        height: 1.9375rem;
        margin: 0;
        padding: 0 $default-spacer;
        width: 100%;

        // transition: all $default-transition-speed ease;
        transition: height 0s;
    }

    select,
    input:focus,
    input:valid,
    input.form-file,
    input.to-selectize.selectized,
    input.has-value,
    textarea:focus,
    textarea:valid,
    textarea.form-file,
    textarea.has-value,
    .expanding-holder.input-focused,
    .expanding-holder.has-value {
        color: $input-color;

        ~ .control-label {
            color: $active-label-color;
            font-size: $default-active-font-size;
            left: ($default-gap / 2);
            line-height: $default-active-font-size;
            top: $default-active-top;

            .required-marker {
                margin-left: ($default-active-font-size / 10);
            }
        }
    }

    input:read-only {
        color: $input-color;

        ~ .control-label {
            color: $default-label-color;
            font-size: $default-active-font-size;
            left: ($default-gap / 2);
            line-height: $default-active-font-size;
            top: $default-active-top;

            // .required-marker {
            //     margin-left: ($default-active-font-size / 10);
            // }
        }
    }

    select,
    input,
    textarea {
        &:focus {
            outline: none;

            ~ .control-label {
                color: $focus-color;

                .required-marker {
                    color: $error-color;
                }
            }

            ~ .bar {
                &::before {
                    left: 0;
                    width: 100%;
                }
            }
        }
    }

    form {
        .button-holder {
            margin-top: 30px;
            position: relative;
        }
    }

    .button-holder {
        border-top: 1px solid #DCDCDC;
        padding: 1rem;
        text-align: right;

        .flat-button {
            margin: 0 0 0 0.5rem;

            &::before {
                transition: all 360ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
            }

            &.delete-action {
                &.active-state {
                    span {
                        color: #FFFFFF !important;
                    }
                }

                &::before {
                    background: darken($delete-action-color, 21%);
                    border: 4px solid darken($delete-action-color, 24%);
                }
            }

            &.save-action {
                &.active-state {
                    span {
                        color: #FFFFFF !important;
                    }
                }

                &::before {
                    background: darken($save-action-color, 21%);
                    border: 4px solid darken($save-action-color, 24%);
                }
            }

            &.expand-past-button {
                overflow: visible;

                &.active-state {
                    &::before {
                        opacity: 1;
                        transform: scale(120);
                    }
                    // transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 100ms ease-out;
                }
            }

            &.cancel-trigger {
                z-index: 100;
            }

            &.delete-trigger,
            &.record-vote-trigger {
                z-index: 150;
            }
        }
    }

    #print_section {
        h5 {
            color: gray;
            font-size: 0.8rem;
            font-weight: normal;
            left: 0;
            line-height: 0.8rem;
            margin: 0;
        }
        label {
            margin-top: 1rem;
        }
    }

    .checkbox {
        &.checkbox-group-first {
            margin-top: 0.25rem;
        }

        &.additional-checkbox-group {
            margin-top: 1rem;
        }

        label {
            padding: 0 0 1.5rem 1.875rem;
        }
    }

    .selectize-control {
        height: 31px;

        .selectize-input {
            border: 0 none;
            border-radius: 0;
            box-shadow: none;
            box-sizing: border-box;
            height: 31px;
            margin: 0;
            overflow: hidden;
            padding: 0;

            &.has-items {
                // padding: 0 5px;
            }

            > * {
                display: inline-block;
            }

            input {
                color: #757575;
                font-size: 1rem;
                line-height: 1.9375rem;
                padding: 0 0.125rem;

                &.has-items {
                    color: #333333;
                }
            }

            .selected-item {
                font-size: 1rem;
                line-height: 1.9375rem;
                height: 1.9375rem;
                margin: 0;
                padding: 0 0.125rem;
            }

            .selected-item-multichoice {
                background: #E7E7E7;
                border: 0 none;
                border-radius: 17px;
                font-size: 14px;
                font-weight: 500;
                height: 32px;
                line-height: 14px;
                margin: 3px 6px 3px 0;
                padding: 9px 32px 9px 12px !important;
                position: relative;

                a {
                    background-color: #757575;
                    border: 0 none;
                    border-radius: 12px;
                    box-sizing: border-box;
                    color: #E7E7E7;
                    content: "\00d7";
                    display: block;
                    font-size: 20px;
                    height: 24px;
                    line-height: 22px;
                    padding: 0;
                    position: absolute;
                    right: 4px;
                    text-align: center;
                    text-decoration: none;
                    top: 4px;
                    vertical-align: middle;
                    width: 24px;

                    &:hover {
                        background-color: #9E9E9E;
                    }
                }

                &.active {
                    background: #F5F5F5;
                    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.4)
                }
            }
        }

        .selectize-dropdown {
            background: transparent;
            // border: 1px solid #D0D0D0;
            border-radius: 3px;
            border-top: 1px solid #D0D0D0;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
            box-sizing: border-box;
            margin: 1px 0 0 0;
            position: absolute;
            z-index: 1221;

            .selectize-dropdown-content {
                background: #FFFFFF;
                border-radius: 3px;
                max-height: 400px;

                .optgroup-header {
                    border-top: 1px solid rgba(0,0,0,0.12);
                    color: #9E9E9E;
                    font-size: 0.75rem;
                    font-weight: 700;
                    line-height: 1.5rem;
                    text-transform: uppercase;
                }
                .option {
                    color: #424242;
                    font-size: 1rem;
                    line-height: 1.9375rem;

                    &.active {
                        background-color: #E0E0E0;
                        color: #424242;
                    }
                }
            }
        }
    }

    .section-header {
        &.placements-header {
            color: #727272;
            font-size: 0.75rem;
            font-weight: 700;
            margin: 1.5rem 0.9375rem 0;
        }
    }

    #content-placement-modal {
        overflow: hidden;

        #run_date_inputs {
            .form-group {
                margin-bottom: 0;
            }
        }

        .date-range-picker {
            left: 26px;
            position: absolute;
            top: 147px;
        }

        #placement_types {
            background: #F8F8F8;
            margin: -0.5rem 0.625rem;
            padding: 0.75rem 0.9375rem;
            width: calc(100% - 1.25rem);

            &.has-error {
                background: lighten($error-color, 38%);
            }

            h5 {
                font-size: 0.8rem;
                font-weight: 400;
                line-height: 1rem;
                margin-bottom: 1rem;
            }

            label {
                padding-bottom: 2.125rem;

                input {
                    cursor: pointer;
                }
            }
        }

        .button-holder {
            .delete-trigger {
                left: 16px;
                margin: 0;
                position: absolute;
            }
        }
    }

    #subscription-modal,
    #content-placement-choice-modal {
      p {
          color: #424242;
          display: block;
          font-size: 14px;
          font-weight: normal;
          line-height: 24px;
          margin: 0;
          padding: 0 3.25rem 14px;
      }
    }

    #content-placement-choice-modal {
        p {
            padding-left: 2.25rem;
            padding-right: 2.25rem;
        }

        .table-card {
            border: 1px solid #E0E0E0;
            border-radius: 2px;
            margin: 0.5rem 2.25rem 2.25rem;

            table {
                th,
                td {
                    &.select-action-holder,
                    &.select-trigger {
                      padding-left: 16px;
                      width: 50px;
                    }

                    &.destination {
                        box-sizing: border-box;
                        padding-left: 6px;
                        width: 110px;

                        & > span {
                            width: calc(100% - 6px);
                        }
                    }

                    &.run-date {
                        width: 180px;
                    }

                    &.is-finalized {
                        width: 110px;
                    }
                }

                thead {
                    tr {
                        background: #F8F8F8;
                    }
                }
                tbody {
                    tr {
                        &:hover {
                            background-color: rgba($budget-blue, 0.08);
                        }

                        &.selected {
                            background-color: rgba($budget-blue, 0.25);
                        }

                        td {
                            .checkbox {
                                height: 16px;
                                margin: 1px 0 0;
                                padding: 0;
                            }
                        }
                    }
                }
            }
        }
    }

    #subscription-modal {
        background: #EEEEEE;
        margin-top: -20px;

        .image-holder {
            background: #4FC3F7;
            border-bottom: 14px solid #4CAF50;
            margin-bottom: 32px;
            padding-top: 32px;
            text-align: center;
            width: 100%;

            img {
                border-bottom: 14px solid #2e7d32;
                margin: 0 auto -14px;
                max-width: 500px;
                width: 90%;
            }
        }

        .button-holder {
            border-top: 0 none;
        }
    }

    #production-notes-modal {
        .inline-image-holder {
            margin: 32px 0 16px;
            text-align: center;
            width: 100%;

            img {
                margin: 0 auto;
                max-width: 225px;
                width: 45%;
            }
        }

        .note-placeholder-message {
            color: #757575;
            display: block;
            font-size: 16px;
            font-weight: normal;
            line-height: 32px;
            margin: 0;
            padding: 0 3.25rem 32px;
            text-align: center;
        }
    }

    #headline-voting,
    #package-web-info,
    #headline-voting-modal {
        .section-header {
            h4 {
                color: #727272;
                display: block;
                font-size: 14px;
                font-weight: 700;
                line-height: 14px;
                margin: 0;
                padding: 2px 0.9375rem 22px;
            }
        }

        .form-radio {
            padding: 0 1.625rem;

            label {
                color: #616161;
                font-size: 14px;
                font-weight: normal;
                padding: 0 0 0 1.875rem;

                input:checked ~ .radio-label {
                    color: #212121;
                    font-weight: 700;
                }
            }
        }

        .headlines-finalized {
            .form-radio {
                .radio {
                    .helper {
                        color: #BDBDBD;
                    }

                    label {
                        &:hover .helper {
                            color: #BDBDBD;
                        }

                        .radio-label {
                            color: #9E9E9E;
                        }

                        input:checked ~ .radio-label {
                            color: #616161;
                        }
                    }

                    input:checked ~ .helper {
                        &::before {
                            color: #757575;
                        }
                        &::after {
                            background-color: #757575;
                            border-color: #757575;
                        }
                    }
                }
            }
        }
    }
}

#production-notes-modal #package-notes-save-button {
    display: none;
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}

@media (max-width: 479px) {
    .package-modal {
        &.waiting {
            border-radius: 0;
            height: 100%;
            top: 0;
            width: 100%;
        }
    }
}


.vex {
    /* This line is required for Vex to enable animations. */
    @include vex-animation(vex-fadein 0.5s);

    // // And this line is needed to enable the z-axis for the
    // // 'fadeforward' transition.
    // perspective: 500px;

    &.vex-closing .vex-content {
        @include vex-animation(vex-fadebackward 0.35s);
    }

    .vex-content {
        @include vex-animation(vex-fadeforward 0.5s);
        z-index: 800;
    }
}

.vex-overlay {
  z-index: 300;
}

.vex-open {
    .timepicker {
        z-index: 1221;
    }

    #datepickers-container {
        .datepicker {
            z-index: 1221;
        }
    }
}
