@import '~box-ui-elements/es/styles/variables';

.bdl-MessageCenterModal {
    display: flex;
    min-height: 400px;
    padding: 54px 126px;

    .modal-dialog-container,
    .modal-dialog {
        width: 592px;
        height: 100%;
    }

    .modal-content {
        display: flex;
        flex: 1;
        margin-top: 0;
        overflow: auto;
    }

    .modal-title {
        justify-content: center;
        width: 100%;
    }

    .modal-dialog {
        padding: 5 * $bdl-grid-unit 0 8 * $bdl-grid-unit;
    }

    .modal-header {
        margin: 0;
        padding: 0 10 * $bdl-grid-unit;
    }

    .bdl-MessageCenterModal-message {
        width: 100%;

        > * {
            height: 100%;
            overflow: hidden;
            border: 1px solid $bdl-gray-10;
            border-radius: $bdl-grid-unit * 2;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .04);
        }
    }

    .bdl-MessageCenterModal-message:not(:last-child) {
        padding-bottom: 4 * $bdl-grid-unit;
    }
}

.bdl-MessageCenterModal-messages {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 1920px;
    padding: 0 6 * $bdl-grid-unit 0 10 * $bdl-grid-unit;
    overflow: hidden;

    .scroll-shadow-container {
        &::before,
        &::after {
            width: calc(100% - #{(4 * $bdl-grid-unit)});
        }
    }
}

.bdl-MessageCenterModal-categorySelector {
    padding: 0 0 6 * $bdl-grid-unit;
}

.bdl-MessageCenterModal-whatsNew {
    margin-bottom: 5 * $bdl-grid-unit;
}

.bdl-MessageCenterModal-title {
    text-align: center;

    .bdl-MessageCenterModal-whatsNew {
        height: 28px;
        font-weight: bold;
        font-size: 22px;
    }

    &.is-collapsed {
        .bdl-MessageCenterModal-whatsNew {
            height: 24px;
            font-size: 18px;
        }
    }

    &.is-expanded {
        padding-top: 3 * $bdl-grid-unit;
    }
}

.bdl-MessageCenterModal-list:focus {
    outline: none;
}