/* Main
-------------------------------------------- */


/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
#pgTabs { border-bottom: 1px solid #939bd2; flex-wrap: wrap; }
.tab-control { display: flex; flex-wrap: nowrap; width: 100%; height: 100%; }
.tab-control-left,
.tab-control-right { flex-direction: row; }
.tab-control-top,
.tab-control-bottom { flex-direction: column; }
.tab-panes { flex: 1; position: relative;width: 100%; height: 100%; overflow: hidden; }
.tab-panes.tab-panes-bottom { display: block; height: auto; }
.tab-pane { display: none; vertical-align: top; overflow: hidden; width: 100%; height: 100%; }
.tab-pane-bottom { height: auto; }
.tab-pane.selected { display: block; }
.tab-strip { display: flex; margin: 0; padding: 0; background-color: var(--layer); color: var(--text-primary); }
.tab-strip-left { flex-direction: column; }
.tab-strip-top { flex-direction: row; }
.tab-strip-right { flex-direction: column; }
.tab-strip-bottom { flex-direction: row; }
.tab-item { display: flex; justify-content: center; align-items: center; background-color: var(--background); padding: 0.5rem; cursor: pointer; }
.tab-item:hover { background-color: var(--background-tone-100); }
.tab-item:focus { outline: none; }
.tab-item-top.selected {}
.tab-item-right.selected {}
.tab-item-bottom.selected {}
.tab-item-left.selected {}
.tab-item.warn { background-color: orange; color: white; }
.tab-item.error { background-color: red; color: white; }
.tab-item.selected { background-color: var(--interactive-secondary); color: var(--text-on-color); }
.tab-item.selected.warn { background-color: orange; }
.tab-item.selected.error { background-color: #ff6666; }
.tab-item-top.error { border-color: #aa0000; }
.tab-item-top.warn { border-color: orange; }
.tab-item.callout { animation: tab-item-flash-unselected .75s infinite ease-in-out alternate; }
.tab-item.selected.callout { animation: tab-item-flash-selected .75s infinite ease-in-out alternate; }

@keyframes tab-item-flash-unselected {
    from { background-color: #efefef; }
    to { background-color: rgba(255, 229, 147, 1); }
}

@keyframes tab-item-flash-selected {
    from { background-color: white; }
    to { background-color: rgba(255, 229, 147, 1);}
}