/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: BI
 *
 * (C) Copyright IBM Corp. 2015, 2018
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

.notransition {
	transition: none !important;
}

/* Overcome issues with resizing slideouts over iFrame */
body[style*="cursor: col-resize"] iframe {
	pointer-events: none;
}

.flyoutPane, .flyoutPane.ui-resizable {
	position: absolute;
	@include theming(background-color, ui-01);
	width: 300px;
	height: 100%;
	bottom: 0;
	z-index: 3000 !important;
	/* Use the default smoothing value as Safari changes the anti-alias value during slideout animations. */
	-webkit-font-smoothing: antialiased;
	display: flex;
}

.highcontrast .flyoutPane,
.highcontrast .flyoutPane.ui-resizable {
	/* High-contrast */
	border: 1px solid transparent;
}

.pane-content {
	height: 100%;
	width: 100%;
}

.flyoutPane.no-float {
	position:relative;
	height:auto;
}

.flyoutPane.pane-right.ui-resizable {
	left: 100% !important;
}

.flyoutPane.pane-right {
	left: 100%;
	.pane-child {
		left: 0;
	}
}
.flyoutPane.pane-left {
	right: 100%;
	.pane-child {
		right: 0;
	}
}


.flyoutPane.no-float.pane-right {
	left: auto;
}
.flyoutPane.no-float.pane-left {
	right: auto;
}

.flyoutPane .pane-content {
    flex: 1 0 0%;
	z-index: 2;
	@include theming(background-color, ui-01);

	overflow: hidden;
	border-right: 1px solid transparent;
	border-top: 1px solid transparent;

	/* Needed for Firefox, without this transparent box-shadow, the child pane shows on top of the parent while animating */
	box-shadow: 0px 0px 1px transparent;

	/* Needed for Safari to honor the z-index value. */
	transform: translate3d(0,0,0);
}
/* Do not show the border next to the ui-size handle */
.flyoutPane.pane-left:not(.ui-resizable) .pane-content {
	border-right: 1px solid;
	@include theming(border-right-color, ui-03);
}
.flyoutPane.pane-right:not(.ui-resizable) .pane-content {
	border-left: 1px solid;
	@include theming(border-left-color, ui-03);
}

.flyoutPane .pane-content .MetadataSlideoutView{
	height: 100%;
	display: flex;
}

/* Resizable handle */
.flyoutPane .resize-handle {
	position: relative;
  cursor: col-resize;
	z-index: 2;
	@include theming(background-color, ui-03);
  width: 8px;
  display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	height: auto;
	right: 0px;
}
.flyoutPane .resize-handle .svgIcon {
	@include theming(fill, icon-01);
	width: 24px;
	height: 24px;
}

.flyoutPane .pane-child {
	position: absolute;
	width: 2px;
	top: 0px;
	bottom: 0px;
	z-index: 1;
}

.flyoutPane .pane-pagination-control{
	display: none;
	position: absolute;
	right: 72px;
	width: 100%;
	height:100%;
}

.flyoutPane .pane-pagination-control svg{
	height: 16px;
	width: 16px;
	display: none;
	position: absolute;
	top: 50%;
	right: 9px;
	@include theming(fill, primary2);
}

.flyoutPane .pane-pagination-control.visible svg{
	display: block;
}

.flyoutPane .tabhidden {
	visibility: hidden;
	opacity: 0;
}

.flyoutPane.collapseRoot>.pane-pagination-control{
	transition: right $semi-dramatic-time ease;
}

.flyoutPane.collapseRoot.collapsed>.pane-pagination-control{
	display: block;
}

.flyoutPane.collapseRoot>.pane-pagination-control.visible{
	@include theming(background-color, ui-02);
	z-index: 3;
	display: block;
	right: 0px;
	cursor: pointer;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}

.flyoutPane.collapseRoot.collapsed>.pane-pagination-control.visible:hover{
	@include theming(background-color, ui-03);
}

.svgIcon {
	transition: transform $dramatic-time ease;
}

.flyoutPane.collapsed {
	position: absolute;
	top: 0px;
	bottom: 0px;
	@include theming(background-color, ui-01);
	z-index: 1;
	transform: translateX(0px);
	transition: transform $semi-dramatic-time ease;
}

.flyoutPane.test {
	transform:translateX(50%);
	transition: transform $semi-dramatic-time ease;
}

.flyoutPane.collapseRoot.collapsed.animationPhase {
	transition: transform $neutral-time ease;
	transform: translateX(36px);
}

.flyoutPane.pane-right.inactive {
	transform: translateX(-1%);
	transition: transform $semi-dramatic-time ease;
}

.flyoutPane.pane-right.active {
	transform: translate3d(-100%, 0px, 0px);
	transition: transform $semi-dramatic-time ease;
}

.flyoutPane.pane-left.inactive {
	transform: translateX(-1%);
	transition: transform $semi-dramatic-time ease;
}

.flyoutPane.pane-left.active {
	transform: translate3d(100%, 0px, 0px);
	transition: transform $semi-dramatic-time ease;
}

.flyoutPane.no-float.pane-right.active, .flyoutPane.no-float.pane-left.active, .flyoutPane.no-float.pane-right.inactive, .flyoutPane.no-float.pane-left.inactive {
	transform: translateX(0%);
}

.flyoutPane .pane-content .pin-icon-container {
	position: absolute;
	left: 0px;
	width: 100%;
}

.sidepane.datasetSlideout .pane-content > .pin-icon-container {
	display: none;
}

.flyoutPane .pin-icon {
	float: right;
	position: relative;
	z-index: 1000;
	transform: rotate(45deg);
}

.flyoutPane .pane-content .pin-icon-container .pin-icon .svgIcon{
	width: 22px;
	height: 32px;
	margin: 7.5px;
	pointer-events: none;
}

.pane-content.pane-pinned {
  height:auto;
}

.flyoutPane .pane-content:not(.pane-pinned) .pin-icon, .flyoutPane .transform-pin{
	transform: rotate(0deg);
}

.flyoutPane .pane-content:not(.pane-pinned) .pin-icon>.svgIcon, .flyoutPane .transform-pin {
	@include theming(fill, text-02, null, !important);
}