////////////////////////////////////////////////////////////
// ACCORDION
////////////////////////////////////////////////////////////

#wc {
    wc-accordion {
	display: block;

	wc-panel-header {
	    text-transform: uppercase;
	}

	&.default .uxcoe wc-panel-header.collapsible.opened:after,
	&.default .uxcoe wc-panel-header.collapsible.closed:after,
	&.default .uxcoe wc-panel-header.collapsible:hover,
	&.default .uxcoe wc-panel-header.collapsible:hover {
	    $bd-color: $dtcc-default-color!important;
	    background: $bd-color;
	}

	&.clearing-services .uxcoe wc-panel-header.collapsible.opened:after,
	&.clearing-services .uxcoe wc-panel-header.collapsible.closed:after,
	&.clearing-services .uxcoe wc-panel-header:hover,
	&.clearing-services .uxcoe wc-panel-header.collapsible:hover,
	&.clearing-services .uxcoe wc-panel-header.collapsible:hover {
	    $bd-color: $dtcc-color-yellow!important;
	    background: $bd-color;
	}

	&.data-services .uxcoe wc-panel-header.collapsible.opened:after,
	&.data-services .uxcoe wc-panel-header.collapsible.closed:after,
	&.data-services .uxcoe wc-panel-header.collapsible:hover,
	&.data-services .uxcoe wc-panel-header.collapsible:hover {
	    $bd-color: $dtcc-color-gray!important;
	    background: $bd-color;
	}

	&.matching-settlement-assets .uxcoe wc-panel-header.collapsible.opened:after,
	&.matching-settlement-assets .uxcoe wc-panel-header.collapsible.closed:after,
	&.matching-settlement-assets .uxcoe wc-panel-header.collapsible:hover,
	&.matching-settlement-assets .uxcoe wc-panel-header.collapsible:hover {
	    $bd-color: $dtcc-color-green!important;
	    background: $bd-color;
	}

	&.collateral-management .uxcoe wc-panel-header.collapsible.opened:after,
	&.collateral-management .uxcoe wc-panel-header.collapsible.closed:after,
	&.collateral-management .uxcoe wc-panel-header.collapsible:hover,
	&.collateral-management .uxcoe wc-panel-header.collapsible:hover {
	    $bd-color: $dtcc-color-marine!important;
	    background: $bd-color;
	}

	&.derivative-services .uxcoe wc-panel-header.collapsible.opened:after,
	&.derivative-services .uxcoe wc-panel-header.collapsible.closed:after,
	&.derivative-services .uxcoe wc-panel-header.collapsible:hover,
	&.derivative-services .uxcoe wc-panel-header.collapsible:hover {
	    $bd-color: $dtcc-color-magenta!important;
	    background: $bd-color;
	}

	&.wealth-management .uxcoe wc-panel-header.collapsible.opened:after,
	&.wealth-management .uxcoe wc-panel-header.collapsible.closed:after,
	&.wealth-management .uxcoe wc-panel-header.collapsible:hover,
	&.wealth-management .uxcoe wc-panel-header.collapsible:hover {
	    $bd-color: $dtcc-color-orange;
	    background: $bd-color;
	}

	wc-panel {
	    margin-bottom: 3px;

	    wc-panel-body {
		border:0!important;
	    }
	}
    }
}