margin-inline-end: auto;
padding-inline-start: $-m;
padding-inline-end: $-m;
+ &.medium {
+ max-width: 1100px;
+ }
&.small {
max-width: 840px;
}
.flex {
min-height: 0;
flex: 1;
+ max-width: 100%;
&.fit-content {
flex-basis: auto;
flex-grow: 0;
display: inline-block !important;
}
+.relative {
+ position: relative;
+}
+
.hidden {
display: none !important;
}
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
- opacity: 0.6;
+ @include lightDark(opacity, 0.6, 0.7);
transition: opacity ease-in-out 120ms;
- &:hover {
- opacity: 1;
+ &:hover, &:focus-within {
+ opacity: 1 !important;
}
- &:focus-within {
- opacity: 1;
+ @media (prefers-contrast: more) {
+ opacity: 1 !important;
}
}