.TrackPerformersModal {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding-bottom: 40px;
    padding-top: 40px;
    pointer-events: none;

    &-container {
        flex-basis: 900px;
        max-height: 100%;
        pointer-events: auto;
    }

    &-header {
        align-items: center;
        border-bottom: 1px solid var(--gray-400);
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        padding: 10px 0;
    }

    &-heading {
        margin: 0 15px;
    }

    &-close {
        fill: var(--gray-700);
        height: 10px;
        margin: 0 15px;
    }

    &-body {
        margin: 15px;
    }

    &-info {
        color: var(--gray-800);
        margin-left: 10px;
    }
    &-info-link {
        color: var(--gray-800);
        text-decoration: underline;
    }

    &-performers-table-wrapper {
        max-height: 300px;
        overflow-y: auto;
        padding-bottom: 200px;
        padding-top: 15px;
    }

    &-performers-table {
        width: 100%;
    }

    &-table-header-cell {
        color: var(--gray-500);
        padding: 0 10px;
        text-transform: uppercase;
    }

    &-performer-type-header {
        width: 230px;
    }

    &-performer-name-header {
        width: 235px;
    }

    &-remove-performer-header {
        width: 50px;
    }

    &-footer {
        border-top: 1px solid var(--gray-400);
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }

    &-table-cell {
        padding: 5px 10px;
        vertical-align: top;
    }

    &-remove-button {
        height: 30px;
        padding: 5px;
        width: 30px;
    }

    &-remove-icon {
        fill: var(--parrot);
    }

    &-add-performer-row {
        background-color: var(--gray-200);
        margin-top: 10px;
        padding: 10px;
        text-align: center;
    }

    &-add-performer-button {
        font-weight: $weight_extra_bold;

        &-disabled {
            cursor: not-allowed;
        }
    }

    .Icons-trash-can {
        fill: var(--parrot);
    }

    &-remove-button-disabled {
        .Icons-trash-can {
            fill: var(--gray-500);
        }
    }

    .FormField-label {
        display: none;
    }

    .Select-control {
        height: 30px;

        .Select-input {
            height: 28px;
        }
        .Select-value {
            line-height: 28px;
            top: 0;
        }
    }

    .FormField-group-has-error {
        &::before {
            display: none;
        }
    }

    &-type-select {
        &-disabled .Select-control {
            background-color: var(--gray-100);
            cursor: not-allowed;
        }
    }

    /* stylelint-disable selector-class-pattern */
    .form-group {
        margin-bottom: 0;
    }

    .Select.is-disabled > .Select-control {
        background-color: var(--gray-200);
    }

    /* stylelint-enable selector-class-pattern */

    .Generic-error {
        margin-bottom: 15px;
        margin-top: 10px;
    }

    &-performer-type-help {
        max-width: 400px;

        /* stylelint-disable selector-class-pattern */
        .tooltip-inner {
            max-width: 400px;
        }
        /* stylelint-enable selector-class-pattern */
    }

    &-tether-element {
        z-index: 4;
    }
}