.wp-block-greyd-tabs {
--tabs-align-tabs: flex-start;
--tabs-tab-gap: calc( 0.5vw + 0.3rem );
--tabs-color: currentColor;
--tabs-bg-color: var(--wp--preset--color--base, var(--wp--preset--color--color-33));
--tabs-border-color: var(--wp--preset--color--mediumlight, var(--wp--preset--color--color-22));
--tabs-content-padding: 0;
--tabs-content-background: initial;
--tabs-content-color: currentColor;
--tabs-content-radius: 0;
--tabs-content-border: none;
}
.wp-block-greyd-tabs .tabs {
display: flex;
justify-content: var(--tabs-align-tabs);
gap: var(--tabs-tab-gap);
overflow: auto;
}
.wp-block-greyd-tabs[data-overflow="stack"] .tabs {
flex-wrap: wrap;
overflow: hidden;
} @media screen and (max-width: 480px) {
.wp-block-greyd-tabs .tabs { justify-content: var(--tabs-align-tabs, flex-start);
}
}
.wp-block-greyd-tabs .greyd_tab {
display: flex;
align-items: center;
cursor: pointer;
white-space: nowrap;
}
.wp-block-greyd-tabs.alignleft .tabs {
justify-content: flex-start;
}
.wp-block-greyd-tabs.aligncenter .tabs {
justify-content: center;
}
.wp-block-greyd-tabs.alignright .tabs {
justify-content: flex-end;
}
:where(.wp-block-greyd-tabs .greyd_tab) {
font: inherit;
}
.greyd_tab.is-active .icon-normal,
.greyd_tab:not(.is-active) .icon-active {
display: none;
} .wp-block-greyd-tabs.is-style-tabs .tabs {
position: relative;
padding: 3px var(--tabs-tab-gap) 0;
}
.wp-block-greyd-tabs.is-style-tabs .tabs::before {
content: " ";
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid var(--tabs-border-color);
}
.wp-block-greyd-tabs.is-style-tabs .greyd_tab {
position: relative; color: var(--tabs-color);
background: var(--tabs-bg-color);
border: 1px solid var(--tabs-border-color);
padding: calc( 0.5vw + 0.3rem ) calc( 1vw + 0.36rem ) calc( 0.5vw + 0.3rem - 1px );
}
.wp-block-greyd-tabs.is-style-tabs .greyd_tab.is-active {
--tabs-bg-color: var(--wp--preset--color--background, var(--wp--preset--color--color-62));
border-bottom: none !important;
} .wp-block-greyd-tabs.is-style-chips {
--tabs-bg-color: var(--wp--preset--color--background, var(--wp--preset--color--color-62));
}
.wp-block-greyd-tabs.is-style-chips .tabs {
margin-bottom: max( var(--wp--style--block-gap), 1em );
}
.wp-block-greyd-tabs.is-style-chips .greyd_tab {
color: var(--tabs-color);
background: var(--tabs-bg-color);
border: 1px solid var(--tabs-border-color);
padding: calc( 0.5vw + 0.3rem ) calc( 1vw + 0.36rem );
border-radius: 100vw;
}
.wp-block-greyd-tabs.is-style-chips .greyd_tab.is-active {
--tabs-color: var(--wp--preset--color--background, var(--wp--preset--color--color-23));
--tabs-bg-color: var(--wp--preset--color--foreground, var(--wp--preset--color--color-31));
--tabs-border-color: var(--wp--preset--color--foreground, var(--wp--preset--color--color-31));
border-bottom-color: var(--tabs-border-color);
} .wp-block-greyd-tabs .panels {
position: relative;
isolation: isolate;
}
.wp-block-greyd-tabs .panel {
position: relative;
width: 100%;
padding: var(--tabs-content-padding);
background: var(--tabs-content-background);
color: var(--tabs-content-color); --text-color: var(--tabs-content-color);
border-radius: var(--tabs-content-radius);
}
.wp-block-greyd-tabs .panel:not(.is-active) {
display: none;
} .wp-block-greyd-tabs .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
display: block;
transition: none;
} .wp-block-greyd-tabs[data-transition="fade"] .panel {
display: flex;
flex-direction: column;
transition: all .3s ease-out;
}
.wp-block-greyd-tabs[data-transition="fade"] .panel:not(.is-active) {
display: flex;
position: absolute;
top: 0;
opacity: 0;
z-index: -1;
}
.wp-block-greyd-tabs[data-transition="fade"] .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
position: relative;
opacity: 1;
z-index: 0;
} .wp-block-greyd-tabs[data-transition="horizontal"] .panels {
overflow: hidden;
}
.wp-block-greyd-tabs[data-transition="horizontal"] .panel {
display: flex;
flex-direction: column;
transition: all .3s ease-out;
}
.wp-block-greyd-tabs[data-transition="horizontal"] .panel:not(.is-active) {
display: flex;
position: absolute;
top: 0;
opacity: 0;
z-index: -1;
transform: translateX(-102%);
}
.wp-block-greyd-tabs[data-transition="horizontal"] .panel.is-active ~ :not(.is-active) {
transform: translateX(102%);
}
.wp-block-greyd-tabs[data-transition="horizontal"] .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
position: relative;
opacity: 1;
z-index: 0;
transition: none;
transform: none;
} .wp-block-greyd-tabs[data-transition="vertical"] .panels {
overflow: hidden;
}
.wp-block-greyd-tabs[data-transition="vertical"] .panel {
display: flex;
flex-direction: column;
transition: all .3s ease-out;
}
.wp-block-greyd-tabs[data-transition="vertical"] .panel:not(.is-active) {
display: flex;
position: absolute;
top: 0;
opacity: 0;
z-index: -1;
transform: translateY(-102%);
}
.wp-block-greyd-tabs[data-transition="vertical"] .panel.is-active ~ :not(.is-active) {
transform: translateY(102%);
}
.wp-block-greyd-tabs[data-transition="vertical"] .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
position: relative;
opacity: 1;
z-index: 0;
transition: none;
transform: none;
}