:root {
  --tab-bg: var(--content-pane-bg);
  --tab-bg-stronger: #EEE;


  --inactive-tab-bg: #E8E8E8;
  --tab-controls-margin: 3px;
  --tabs-anim-pos: 10px;
  --tabs-anim-dur: 0.2s;

  --tab-label-control-color: #333;
  --tab-label-control-hover: rgba(128,128,128,0.5);

  --tabs-img: 18px;
  --tabs-img-small: 16px;

  --tabs-side-radius: 30px;
  --tabs-top-radius: 15px;
}

[data-theme="dark"] {
  --inactive-tab-bg: #222;
  --tab-label-control-color: #CCC;

  --tab-bg-stronger: #111;
}

.tabs {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0px var(--content-pane-gap) var(--content-pane-gap) 0px;
    height: calc(100% - var(--content-pane-gap));
    flex-grow: 0;
}

.tabs.vertical {
  flex-direction: row;
}

.tabs-controls
{
  display: flex;
  flex-direction: row;
  /* margin-left: 10px; */
  max-width: 100%;
}

.tabs.vertical > .tabs-controls
{
  flex-direction: column;
}

.tab-control
{
    display: flex;
    flex-direction: row;
    align-items: center;

    height: var(--button-height);

    background-color: var(--inactive-tab-bg);
    margin: 0px var(--tab-controls-margin) var(--tab-controls-margin) 0px;

    border-radius: var(--tabs-top-radius);
    cursor: pointer;

    border: none;

    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s, margin var(--tabs-anim-dur), height var(--tabs-anim-dur);
}

.tabs.small .tab-control{
    height: var(--button-height-small);
}



/*
.tabs.vertical > .tabs-controls > .tab-control.active
{
  margin: 0px var(--tab-controls-margin) var(--tab-controls-margin) 0px;
}
*/

.tab-control:not(.active):not(:has(.tab-label-control-icon:hover)):hover
{
  background-color: var(--button-bg-hover);
}

.tab-control.active
{
  margin-bottom: 0px;
  border-radius: var(--tabs-top-radius) var(--tabs-top-radius) 0px 0px;
  height: calc(var(--button-height) + var(--tab-controls-margin));
  background-color: var(--tab-bg);
}

.tabs.stronger-bg .tab-control.active
{
    background-color: var(--tab-bg-stronger);
}

.tab-control.hiding
{
  display: none;
}

.tabs.vertical > .tabs-controls > .tab-control
{
  border-radius: var(--tabs-side-radius);
}

.tabs.vertical > .tabs-controls > .tab-control.active
{
  height: var(--button-height);
  border-radius: var(--tabs-side-radius) 0px 0px var(--tabs-side-radius);
  margin: 0px 0px var(--tab-controls-margin) 0px;
}

.tabs.small.vertical > .tabs-controls > .tab-control.active
{
    height: var(--button-height-small);
}

.tab-control > .tab-label
{   
    display: flex;
    flex-direction: row;

    width: fit-content;
    align-items: center;

    position: relative;
    min-width: var(--pane-label-min-width);

    padding: 0px 0px 0px 2px;

    transition: color 0.4s, background-color 0.4s, border 0.4s;
    user-select: none;  
    text-wrap: nowrap;
}

.tabs.vertical .tab-control > .tab-label
{
    width: 100%;
}

/*
.tabs.vertical > .tabs-controls > .tab-control > .tab-label
{
  text-wrap: nowrap;
}
*/
.tab-control > .tab-label > .tab-label-icon
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);
    /* line-height: var(--pane-label-height); */

    padding-left: 5px;
    padding-right: 8px;
    border-right: 2px solid var(--pane-label-image-div-line);
    margin-right: 5px;

    color: var(--pane-label-icon-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
}

.tab-label-icon > svg
{
    width: var(--tabs-img);
    height: var(--tabs-img);
}

.tabs.small .tab-label-icon
{
    width: var(--tabs-img-small);
    height: var(--tabs-img-small);

    padding-right: 4px;
    margin-right: 4px;
}

.tabs.small .tab-label-icon > svg
{
    width: var(--tabs-img-small);
    height: var(--tabs-img-small);
}

.tab-control > .tab-label > .label-text
{
    color: var(--input-label-text);

    transition: color 0.4s, background-color 0.4s;
    /* line-height: var(--input-line-height); */

    font-size: var(--label-font-size);
    padding-right: 10px;

    width: fit-content;
}

.tabs.small .tab-control > .tab-label > .label-text
{
    font-size: var(--label-font-size-small);
}

.tabs-overflow
{
  align-self: flex-end;
  display: none;

  flex-direction: row;
  align-items: center;

  height: var(--button-height);
  width: var(--button-height);

  min-width: var(--button-height);
  justify-content: center;

  background-color: var(--inactive-tab-bg);
  margin: 0px 0px var(--tab-controls-margin) 0px;

  /* border-radius: var(--content-pane-raidus); */
  border-radius: 50%;
  cursor: pointer;

  border: none;

  /* margin-left: auto; */

  transition: color 0.4s, background-color 0.4s, box-shadow 0.4s, margin var(--tabs-anim-dur), height var(--tabs-anim-dur);
}

.tabs-overflow.showing
{
  display: flex;
}

.tabs-overflow > .tabs-overflow-icon
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);

    padding-left: 5px;
    padding-right: 5px;

    color: var(--pane-label-icon-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
}

.tabs-overflow-icon > svg
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);
}

.tabs-content
{
  flex-grow: 1;
  /* height: calc(100% - var(--content-pane-gap)); */
  background-color: var(--tab-bg);
  /* border-radius: var(--content-pane-raidus) var(--content-pane-raidus) 0px 0px; */
  border-radius: var(--tabs-top-radius);
  transition: background-color 0.4s, border-radius 0.4s;

  max-height: calc(100% - 43px);
}

.tabs.stronger-bg .tabs-content
{
    background-color: var(--tab-bg-stronger);
}

.tabs.vertical .tabs-content
{
    max-height: 100%;
}

.tabs-content:has(.first.active)
{
  border-radius: 0px var(--tabs-top-radius) var(--tabs-top-radius) var(--tabs-top-radius);
}

.tab-panel
{
  /* height: 100%; */
  display: none;
  opacity: 0;
  /* left: calc(var(--tabs-anim-pos) *-1); */
  transform: translateX(calc(var(--tabs-anim-pos) *-1));

  position: relative;

  overflow-y: auto;
  /* height: calc(100% - var(--content-pane-gap)); */
  max-height: calc(100% - 20px);
  transition: opacity var(--tabs-anim-dur) ease-out, transform var(--tabs-anim-dur) ease-out;
  padding: 5px;

  border-radius: inherit;

  /* width: calc(100% - 5px); */
}

.tabs.vertical .tab-panel
{
    transform: translateY(calc(var(--tabs-anim-pos) *-1));
}

.tab-panel.active
{
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.tabs.vertical .tab-panel.active
{
  transform: translateY(0);
}

.tab-panel.showing
{
    display: block;
    opacity: 0;
    transform: translateX(var(--tabs-anim-pos));
}

.tabs.vertical .tab-panel.showing
{
    transform: translateY(var(--tabs-anim-pos));
}

.tab-panel.showing.from-right
{
  transform: translateX(calc(var(--tabs-anim-pos) *-1));
}

.tabs.vertical .tab-panel.showing.from-right
{
    transform: translateY(calc(var(--tabs-anim-pos) *-1));
}

.tab-panel.clearing
{
    opacity: 0;
    transform: translateX(calc(var(--tabs-anim-pos) *-1));
}

.tabs.vertical .tab-panel.clearing
{
    transform: translateY(calc(var(--tabs-anim-pos) *-1));
}

.tab-panel.clearing.from-right
{
    transform: translateX(var(--tabs-anim-pos));
}

.tabs.vertical .tab-panel.clearing.from-right
{
    transform: translateY(var(--tabs-anim-pos));
}

.tab-panel-content {
    overflow-y: auto;
    height: inherit;
    padding: 5px;
}

.tab-control > .tab-label > .tab-label-control
{
  align-content: center;
  height: var(--pane-label-img);
  margin-left: auto;
}

.tab-control > .tab-label > .tab-label-control > .tab-label-control-icon
{
    width: var(--pane-label-img);
    height: var(--pane-label-img);

    margin-right: 5px;

    color: var(--tab-label-control-color);
    transition: border-right 0.4s, color 0.4s, background-color 0.4s;  
    cursor: pointer;

    border-radius: 50%;
}

/*Was Small but changed to normal*/
.tabs.small .tab-control > .tab-label > .tab-label-control > .tab-label-control-icon
{
    width: var(--tabs-img);
    height: var(--tabs-img);
}

.tab-control > .tab-label > .tab-label-control > .tab-label-control-icon:hover
{
  background-color: var(--tab-label-control-hover);
}

.tab-label-control-icon > svg
{
    width: var(--tabs-img);
    height: var(--tabs-img);
}

/*Was Small but changed to normal*/
.tabs.small .tab-label-control-icon > svg
{
    width: var(--tabs-img);
    height: var(--tabs-img);
}

.medium-height-tabs-content .tabs-content
{
    height: 500px;
}

.tabs-content-600 .tabs-content
{
    height: 600px;
}