/*
    This file is meant to serve as a starter for customizing the CSS of
    the Destiny One/CMS catalog connector.
    Please exercise caution in what you style and how you style it.
    As the connector receives updates, you may need to re-download this file to style additional features.
    You may need to use !important in some places to make sure your styles override the connector defaults.

    To style elements on a single view, see the "Views" section at the bottom of this file.
*/

/*
    --Top-level--
    These elements are included on all views
*/
.mc-d1-connector-wrapper [data-el="app-wrapper"] {
    /* The main wrapper for the app */
}
.mc-d1-connector-wrapper [data-el="cart"] {
    /* The main cart icon for the app */
}
body .mc-d1-connector-wrapper a:not([class*="mc-btn"]),
body [data-el="modal"] a:not([class*="mc-btn"]) {
    /* Links (that aren't styled as buttons) */
}



/* 
   --Generic selectors--
   These elements are used across multiple views for
   common features
*/
.mc-d1-connector-wrapper [data-el="page-title"] {
    /* Main page title */
}
.mc-d1-connector-wrapper [data-el="page-description"] {
    /* Main page description */
}
.mc-d1-connector-wrapper [data-el="hero"] {
    /* Main page image or video. If video, the iframe or video tag will be inside this element  */
}
.mc-d1-connector-wrapper [data-el="description-title"] {
    /* Heading tag for main page description */
}
.mc-d1-connector-wrapper [data-el="description"] {
    /* Main page description */
}
.mc-d1-connector-wrapper [data-el="button"] {
    /* Generic button */
}
.mc-d1-connector-wrapper [data-el="button-outline"] {
    /* Generic button with outline styles */
}

/* View states */
.mc-d1-connector-wrapper [data-el="view-error"] {
    /* Error message that displays when a view cannot be loaded */
}
.mc-d1-connector-wrapper [data-el="view-loading"] {
    /* Loading indicator that displays when a view is loading */
}

/* Components */
.mc-d1-connector-wrapper [data-el="badges"] {}
.mc-d1-connector-wrapper [data-el="badge"] {}
.mc-d1-connector-wrapper [data-el="read-more"] {}
.mc-d1-connector-wrapper [data-el="tabs"] {}
.mc-d1-connector-wrapper [data-el="tab"] {}
.mc-d1-connector-wrapper [data-el="tab-panels"] {}
.mc-d1-connector-wrapper [data-el="tab-panel"] {}
.mc-d1-connector-wrapper [data-el="list-panel"] {}
.mc-d1-connector-wrapper [data-el="list-panel-list"] {}
.mc-d1-connector-wrapper [data-el="list-panel-item"] {}
.mc-d1-connector-wrapper [data-el="list-panel-panel"] {}
.mc-d1-connector-wrapper [data-el="list-panel-mobile-panel"] {}
.mc-d1-connector-wrapper [data-el="button-accordion"] {}
.mc-d1-connector-wrapper [data-el="button-accordion-item"] {}
.mc-d1-connector-wrapper [data-el="button-accordion-item-open-button"] {}
.mc-d1-connector-wrapper [data-el="button-accordion-item-title"] {}
.mc-d1-connector-wrapper [data-el="button-accordion-item-content"] {}
.mc-d1-connector-wrapper [data-el="modal"] {}

/* Course panel */
.mc-d1-connector-wrapper [data-el="course-panel-header"] {}
.mc-d1-connector-wrapper [data-el="course-panel-title"] {}
.mc-d1-connector-wrapper [data-el="course-panel-code"] {}
.mc-d1-connector-wrapper [data-el="course-panel-badges"] {}
.mc-d1-connector-wrapper [data-el="course-panel-description-title"] {}
.mc-d1-connector-wrapper [data-el="course-panel-description"] {}

/* Section panel */
.mc-d1-connector-wrapper [data-el="section-panel-header"] {}
.mc-d1-connector-wrapper [data-el="section-panel-title"] {}
.mc-d1-connector-wrapper [data-el="seciton-panel-name"] {}
.mc-d1-connector-wrapper [data-el="section-panel-top-bar"] {}
.mc-d1-connector-wrapper [data-el="section-panel-schedules"] {}
.mc-d1-connector-wrapper [data-el="section-panel-schedules-title"] {}
.mc-d1-connector-wrapper [data-el="section-panel-schedule-title"] {}
.mc-d1-connector-wrapper [data-el="section-panel-schedule"] {}
.mc-d1-connector-wrapper [data-el="section-panel-details-title"] {}
.mc-d1-connector-wrapper [data-el="section-panel-details"] {}
.mc-d1-connector-wrapper [data-el="section-panel-details-fees"] {}

/* Certificate panel */
.mc-d1-connector-wrapper [data-el="certificate-panel-header"] {}
.mc-d1-connector-wrapper [data-el="certificate-panel-title"] {}
.mc-d1-connector-wrapper [data-el="certificate-panel-code"] {}
.mc-d1-connector-wrapper [data-el="certificate-panel-badges"] {}
.mc-d1-connector-wrapper [data-el="certificate-panel-description-title"] {}
.mc-d1-connector-wrapper [data-el="certificate-panel-description"] {}



/*
    --Search pages--
    These elements are used across search views
*/
.mc-d1-connector-wrapper [data-el="search-bar"] {}
.mc-d1-connector-wrapper [data-el="search-bar-input"] {}
.mc-d1-connector-wrapper [data-el="search-bar-advanced-filters"] {}
.mc-d1-connector-wrapper [data-el="search-bar-button"] {}
.mc-d1-connector-wrapper [data-el="basic-filters"] {}
.mc-d1-connector-wrapper [data-el="all-filters"] {}
.mc-d1-connector-wrapper [data-el="basic-filters-search-button"] {}
.mc-d1-connector-wrapper [data-el="basic-filters-reset-button"] {}
.mc-d1-connector-wrapper [data-el="all-filters-buttons"] {}
.mc-d1-connector-wrapper [data-el="all-filters-apply-button"] {}
.mc-d1-connector-wrapper [data-el="all-filters-reset-button"] {}
.mc-d1-connector-wrapper [data-el="search-results-loading"] {}
.mc-d1-connector-wrapper [data-el="search-results-error"] {}
.mc-d1-connector-wrapper [data-el="search-results-title"] {}
.mc-d1-connector-wrapper [data-el="search-results-description"] {}
.mc-d1-connector-wrapper [data-el="search-results-empty"] {}
.mc-d1-connector-wrapper [data-el="search-results-row"] {}
.mc-d1-connector-wrapper [data-el="search-results-row"] > div > :first-child {
  width: 33%;
  object-fit: contain;
}
.mc-d1-connector-wrapper [data-el="search-results-row-image"] {}
.mc-d1-connector-wrapper [data-el="search-results-row-title"] {}
.mc-d1-connector-wrapper [data-el="search-results-row-code"] {}
.mc-d1-connector-wrapper [data-el="search-results-row-details"] {}

/* Pagination */
.mc-d1-connector-wrapper [data-el="pagination"] {}
.mc-d1-connector-wrapper [data-el="pagination-prev"] {}
.mc-d1-connector-wrapper [data-el="pagination-page"] {}
.mc-d1-connector-wrapper [data-el="pagination-next"] {}
.mc-d1-connector-wrapper [data-el="pagination-ellipsis"] {}



/*
    --View-specific--
    These elements are specific to a single view
*/

/* Program area detail */
.mc-d1-connector-wrapper [data-el="program-streams"] {}
.mc-d1-connector-wrapper [data-el="program-streams-title"] {}
.mc-d1-connector-wrapper [data-el="program-stream"] {}
.mc-d1-connector-wrapper [data-el="offerings-title"] {}

/* Program list */
.mc-d1-connector-wrapper [data-el="program-stream"] {}

/* Certificate/Course detail */
.mc-d1-connector-wrapper [data-el="no-sections-message"] {} /* certificate/course detail */



/*
    --Views--
    Each view has a 'data-view' attribute attached to its app wrapper.
    Prepend any of the above selectors (minus their .mc-d1-connector-wrapper)
    with any of the selectors below to style elements on a specific view only
*/
.mc-d1-connector-wrapper[data-view="certificate-detail"] {}
.mc-d1-connector-wrapper[data-view="course-detail"] {}
.mc-d1-connector-wrapper[data-view="program-area-detail"] {}
.mc-d1-connector-wrapper[data-view="program-stream-detail"] {}
.mc-d1-connector-wrapper[data-view="program-area-list"] {}
.mc-d1-connector-wrapper[data-view="course-search"] {}
.mc-d1-connector-wrapper[data-view="certificate-search"] {}