.terminals {
width: 100%;
height: 100%;
overflow-y: hidden;
.tabs {
--link-underline-thickness: 4px;
height: 100%;
}
.titles {
@include trz-header;
background-color: var(--background-color);
border: 1px solid var(--color);
@include prevent-user-select;
}
.titles>ul {
@include trz-header;
overflow-x: scroll;
overflow-y: hidden;
@include no-scroll-bar;
}
.title {
height: 100%;
padding-top: calc(var(--padding) - var(--link-underline-thickness));
padding-bottom: calc(var(--padding) - var(--link-underline-thickness));
cursor: pointer;
color: var(--color);
&:hover,
&.selected {
color: var(--selected-color);
background-color: var(--selected-background-color);
}
&>div {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
}
.close-icon {
height: 15px;
filter: invert(1);
visibility: hidden;
&:hover {
background-color: var(--link-color);
filter: invert(0);
}
margin-left: var(--padding);
cursor: pointer;
padding: 3px;
}
.titles .title:hover .close-icon {
visibility: visible;
}
.items {
flex: 1;
min-height: 0;
&>ul {
height: 100%;
&>li {
height: 100%;
}
}
}
.item {
height: 100%;
}
.terminal {
height: 100%;
&>div {
height: 100%;
}
}
}
.title-span {
white-space: nowrap;
}