$padding: 20px;
$border: 1px solid #c8c6c5;
$border-light: 1px solid $mouse;
$tableCellWidth: 110px;
$tableCellMinWidth: 70px;

.ResolutionsModal {
    .Icons-view-more-next-arrow {
        fill: $rhino;
    }

    &-modal {
        .ReactModal-content {
            width: 782px;
        }

        .ReactModal-body {
            padding: 0;
        }
    }

    &-content {
        padding: $padding;
    }

    &-instructions {
        margin-bottom: $padding;

        .Icons-down-direction-arrow,
        .Icons-up-direction-arrow {
            fill: $link;
            height: 13px;
            position: relative;
            top: 2px;
        }

        .ResolutionsModal-instructions-button {
            border: none;
            padding: 0;
        }

        &-list {
            margin-top: 15px;
        }
    }

    &-instruction {
        display: flex;
        padding: 5px 0;

        &-bull {
            margin-right: 5px;
        }
    }

    &-table {
        min-width: 470px;

        &-header {
            align-items: center;
            border-bottom: $border;
            border-top: $border;
            display: flex;
        }

        &-rows {
            max-height: 308px;
            overflow: auto;
        }

        &-row {
            border-bottom: $border-light;
            display: flex;
        }
    }

    &-table-header-cell {
        min-width: $tableCellMinWidth;
        padding: 5px 10px;
        width: $tableCellWidth;

        &-arrow {
            min-width: 50px;
            text-align: center;
            width: 50px;
        }

        &-button {
            min-width: 70px;
            width: 70px;
        }
    }

    &-table-row-cell {
        line-height: 36px;
        min-width: $tableCellMinWidth;
        padding: 2px 10px;
        width: $tableCellWidth;

        &-label {
            margin: 0;
        }
        &-arrow {
            min-width: 50px;
            width: 50px;
        }
    }

    &-table-row-cell-button {
        min-width: 70px;
        text-align: center;
        width: 70px;
    }

    &-add-resolution {
        background-color: $mouse;
        margin-top: $padding;
        padding: $padding;

        &-header {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: $padding;
        }

        &-row {
            align-items: center;
            display: flex;
        }

        &-footer {
            margin-top: $padding;
            text-align: right;
        }
    }

    &-add-resolution-cell {
        min-width: $tableCellMinWidth;
        padding: 2px 10px;
        width: $tableCellWidth;

        &:first-of-type {
            padding-left: 0;
        }

        &:last-of-type {
            padding-right: 0;
        }

        &-arrow {
            min-width: 50px;
            width: 50px;
        }
    }

    &-add-resolution-cell-dropdown {
        flex: 1;

        &-subtitle {
            display: block;
        }

        .Select-arrow {
            background: none;
            border-color: $grey_600 transparent transparent;
            border-style: solid;
            border-width: 5px 5px 2.5px;
            display: inline-block;
            height: 0;
            margin-right: 10px;
            position: relative;
            width: 0;
        }

        .Select-menu {
            max-height: 128px;
            overflow: auto;
        }

        .Select-clear-zone {
            display: none;
        }
    }

    &-add-resolution-duplicate-warning {
        margin-bottom: 20px;

        .DismissibleAlert {
            border: 1px solid $parrot;
        }

        .Icons-incomplete-alert {
            height: 16px;
            width: 16px;
        }

        .DismissibleAlert-danger-title {
            font-size: 12px;
            font-weight: normal;
        }
    }

    &-video-dimensions-guide-image {
        width: 100%;
    }

    &-footer {
        border-top: $border;
        padding: $padding;
        text-align: right;
    }
}