/*
!!!!
This pen is being refactored

Tasks:
- do you need to add the width and height properties for core styles from text-flat
-- replace the transform on top/left for text-sliding
- describe why you use default values for settings
-- how to merge the opacity and transform properties of the extention #1 and extention #2 without overriding
-- add hover custom properties
-- test how works hover custom properties if you don't set a value. I think it will reset a value of the basic property
-- write the section "why you use the ui-* properties for creating settings when hover
-- create .text-flat_transition for separeting transition-* properties
!!!!
*/
/*
=====
DEPENDENCES
=====
*/

/*
1. Removes the any mouse events, i.e hover that works by default
*/

.rlink{
  display: var(--rlink-display, inline-flex) !important;
}

.rlink[href]{
  color: var(--rlink-color) !important;
  text-decoration: var(--rlink-text-decoration, none) !important;
}

.rlink:not([href]){
  pointer-events: none; /* 1 */
}

/*
1. Removes the any mouse events, i.e hover that works by default
*/

.rbutton{
  background-color: var(--rbutton-background-color, transparent) !important;
  padding: var(--rbutton-padding, var(--rbutton-padding-top, 0) var(--rbutton-padding-right, 0) var(--rbutton-padding-bottom, 0) var(--rbutton-padding-left, 0)) !important;

  border-width: var(--rbutton-border-width, var(--rbutton-border-top-width, 0) var(--rbutton-border-right-width, 0) var(--rbutton-border-bottom-width, 0) var(--rbutton-border-left-width, 0)) !important;
  border-style: var(--rbutton-border-style, solid) !important;
  border-color: var(--rbutton-border-color, currentcolor) !important;

  font-family: var(--rbutton-font-family, inherit) !important;
  font-size: var(--rbutton-font-size, 1em) !important;
  font-weight: var(--rbutton-font-weight, inherit) !important;
  
  color: var(--rbutton-color, currentcolor) !important;
  text-align: var(--rbutton-text-align, center) !important;
  text-transform: var(--rbutton-text-transform, inherit) !important;
  letter-spacing: var(--rbutton-letter-spacing, inherit) !important;
  word-spacing: var(--rbutton-word-spacing, inherit) !important;

  text-shadow: var(--rbutton-text-shadow, none) !important;
  display: var(--rbutton-display, inline-flex) !important;
}

.rbutton:disabled{
  pointer-events: none; /* 1 */
}

.ui-button:not(:disabled){
  cursor: var(--uibutton-cursor, pointer);
}

/*
=====
OUTLINED TEXT
=====
*/

/* 
basic
*/ 

.text-outlined{
  --ui-text-outlined-weight: var(--text-outlined-weight, 2px);
  --ui-text-outlined-line-color: var(--text-outlined-line-color, currentcolor);

  position: var(--text-outlined-position, relative);
}


.text-outlined:disabled{
  opacity: var(--text-flat-opacity-disabled, 0.5);
}

.text-outlined__label{
  display: var(--text-outlined-label-display, block);
}

.text-outlined::before,
.text-outlined::after,
.text-outlined__label::before,
.text-outlined__label::after{
  content: "";     
  background-color: var(--ui-text-outlined-line-color);
  position: absolute; 
}

.text-outlined::before, 
.text-outlined::after{
  width: 100%;
  height: var(--ui-text-outlined-weight);
  left: 0;
}

.text-outlined__label::before,
.text-outlined__label::after{
  width: var(--ui-text-outlined-weight);
  height: 100%;
  top: 0;
}

.text-outlined::before{
  top: 0;
}

.text-outlined::after{
  bottom: 0;
}

.text-outlined__label::before{
  left: 0;
}

.text-outlined__label::after{
  right: 0;
}

/*
adapters
*/

.text-outlined:not(.rlink, .rbutton){
  display: var(--text-outlined-display, inline-flex);
  color: var(--text-outlined-color, currentcolor);
}

.text-outlined.rlink[href]{
  --rlink-display: var(--text-outlined-display);
  --rlink-color: var(--text-outlined-color, currentcolor);
}

.text-outlined:not(.rbutton){
  padding: var(--text-outlined-padding, .25rem);
}

.text-outlined.rbutton{
  --rbutton-color: var(--text-outlined-color, currentcolor);
  --rbutton-padding: var(--text-outlined-padding, .25rem);
}

/* 
text-outlined extension

1. The transition property isn't used because there are limits of the 
transition property syntax, particularly multiple values can't be used. 

2. I hide the lines so that they display the same regardless of what the 
element is. But I only show the line for interactive elements, i.e the 
button and the a
*/ 

/* extention #1 */

.text-outlined::before,
.text-outlined::after,
.text-outlined__label::before,
.text-outlined__label::after{ 
  opacity: var(--text-outlined-line-opacity, 0); /* 2 */
}

.text-outlined:hover{
  --text-outlined-line-opacity: var(--text-outlined-line-opacity-hover, 1); /* 2 */
}

/* extention #2 */

.text-outlined{
  --ui-text-outlined-line-default-transition-property: var(--text-outlined-line-default-transition-property, transform, opacity);
  --ui-text-outlined-line-default-transition-duration: var(--text-outlined-line-default-transition-duration, .2s, .15s);
  --ui-text-outlined-line-default-transition-timing-function: var(--text-outlined-line-default-transition-timing-function, ease-out);
  --ui-text-outlined-line-default-transition-delay: var(--text-outlined-line-default-transition-delay, 0s, .15s);
  
  overflow: hidden;
}

.text-outlined::before,
.text-outlined::after,
.text-outlined__label::before,
.text-outlined__label::after{ 
  will-change: var(--text-outlined-will-change, transform, opacity);
}

.text-outlined::before{
  transform: var(--text-outlined-top-line-transform, translate3d(-105%, 0, 0));
  transition-property: var(--text-outlined-top-line-transition-property, var(--ui-text-outlined-line-default-transition-property)); /* 1 */
  transition-duration: var(--text-outlined-top-line-transition-duration, var(--ui-text-outlined-line-default-transition-duration)); /* 1 */
  transition-timing-function: var(--text-outlined-top-line-transition-timing-function, var(--ui-text-outlined-line-default-transition-timing-function)); /* 1 */
  transition-delay: var(--text-outlined-top-line-transition-delay, var(--ui-text-outlined-line-default-transition-delay)); /* 1 */
}

.text-outlined::after{
  transform: var(--text-outlined-bottom-line-transform, translate3d(105%, 0, 0));
  transition-property: var(--text-outlined-bottom-line-transition-property, var(--ui-text-outlined-line-default-transition-property)); /* 1 */
  transition-duration: var(--text-outlined-bottom-line-transition-duration, var(--ui-text-outlined-line-default-transition-duration)); /* 1 */
  transition-timing-function: var(--text-outlined-bottom-line-transition-timing-function, var(--ui-text-outlined-line-default-transition-timing-function)); /* 1 */
  transition-delay: var(--text-outlined-bottom-line-transition-delay, var(--ui-text-outlined-line-default-transition-delay)); /* 1 */
}

.text-outlined__label::before{ 
  transform: var(--text-outlined-left-line-transform, translate3d(0%, -100%, 0));
  transition-property: var(--text-outlined-left-line-transition-property, var(--ui-text-outlined-line-default-transition-property)); /* 1 */
  transition-duration: var(--text-outlined-left-line-transition-duration, var(--ui-text-outlined-line-default-transition-duration)); /* 1 */
  transition-timing-function: var(--text-outlined-left-line-transition-timing-function, var(--ui-text-outlined-line-default-transition-timing-function)); /* 1 */
  transition-delay: var(--text-outlined-left-line-transition-delay, var(--ui-text-outlined-line-default-transition-delay)); /* 1 */
}

.text-outlined__label::after{ 
  transform: var(--text-outlined-right-line-transform, translate3d(0%, 100%, 0));
  transition-property: var(--text-outlined-right-line-transition-property, var(--ui-text-outlined-line-default-transition-property)); /* 1 */
  transition-duration: var(--text-outlined-right-line-transition-duration, var(--ui-text-outlined-line-default-transition-duration));  /* 1 */
  transition-timing-function: var(--text-outlined-right-line-transition-timing-function, var(--ui-text-outlined-line-default-transition-timing-function)); /* 1 */
  transition-delay: var(--text-outlined-right-line-transition-delay, var(--ui-text-outlined-line-default-transition-delay)); /* 1 */
}

.text-outlined:is(a, button):hover{
  --text-outlined-top-line-transform: var(--text-outlined-top-line-transform-hover, translate3d(0, 0, 0));
  --text-outlined-right-line-transform: var(--text-outlined-right-line-transform-hover, translate3d(0, 0, 0));
  --text-outlined-bottom-line-transform: var(--text-outlined-bottom-line-transform-hover, translate3d(0, 0, 0));
  --text-outlined-left-line-transform: var(--text-outlined-left-line-transform-hover, translate3d(0, 0, 0));

  --text-outlined-top-line-transition-property: var(--text-outlined-top-line-transition-property-hover);
  --text-outlined-right-line-transition-property: var(--text-outlined-right-line-transition-property-hover);
  --text-outlined-bottom-line-transition-property: var(--text-outlined-bottom-line-transition-property-hover);
  --text-outlined-left-line-transition-property: var(--text-outlined-left-line-transition-property-hover);
  
  --text-outlined-top-line-transition-duration: var(--text-outlined-top-line-transition-duration-hover, .25s);
  --text-outlined-right-line-transition-duration: var(--text-outlined-right-line-transition-duration-hover, .25s);
  --text-outlined-bottom-line-transition-duration: var(--text-outlined-bottom-line-transition-duration-hover, .25s);
  --text-outlined-left-line-transition-duration: var(--text-outlined-left-line-transition-duration-hover, .25s);

  --text-outlined-top-line-transition-timing-function: var(--text-outlined-top-line-transition-timing-function-hover);
  --text-outlined-right-line-transition-timing-function: var(--text-outlined-right-line-transition-timing-function-hover);
  --text-outlined-bottom-line-transition-timing-function: var(--text-outlined-bottom-line-transition-timing-function-hover);
  --text-outlined-left-line-transition-timing-function: var(--text-outlined-left-line-transition-timing-function-hover);  
  
  --text-outlined-top-line-transition-delay: var(--text-outlined-top-line-transition-delay-hover, 0s);
  --text-outlined-right-line-transition-delay: var(--text-outlined-right-line-transition-delay-hover, 0s);
  --text-outlined-bottom-line-transition-delay: var(--text-outlined-bottom-line-transition-delay-hover, 0s);
  --text-outlined-left-line-transition-delay: var(--text-outlined-left-line-transition-delay-hover, 0s);

  --text-outlined-will-change: var(--text-outlined-will-change-hover);
}

/*
modifiers
*/

.text-outlined_v5{
  --text-outlined-top-line-transform: translate3d(-100%, 0, 0);
  --text-outlined-right-line-transform: translate3d(0, -100%, 0);  
  --text-outlined-bottom-line-transform: translate3d(100%, 0, 0);
  --text-outlined-left-line-transform: translate3d(0, 100%, 0);
  
  --text-outlined-top-line-transform-hover: translate3d(0, 0, 0);
  --text-outlined-right-line-transform-hover: translate3d(0 0, 0);  
  --text-outlined-bottom-line-transform-hover: translate3d(0, 0, 0);
  --text-outlined-left-line-transform-hover: translate3d(0, 0, 0);

  --text-outlined-top-line-transition-duration-hover: .25s;
  --text-outlined-right-line-transition-duration-hover: .25s;  
  --text-outlined-bottom-line-transition-duration-hover: .25s;  
  --text-outlined-left-line-transition-duration-hover: .25s;

  --text-outlined-top-line-transition-delay-hover: 0s;
  --text-outlined-right-line-transition-delay-hover: 0s;
  --text-outlined-bottom-line-transition-delay-hover: 0s;
  --text-outlined-left-line-transition-delay-hover: 0s;    
}

.text-outlined_v6{
  --text-outlined-top-line-transform: translate3d(-105%, 0, 0);
  --text-outlined-right-line-transform: translate3d(0, -105%, 0);  
  --text-outlined-bottom-line-transform: translate3d(105%, 0, 0);
  --text-outlined-left-line-transform: translate3d(0, 105%, 0);

  --text-outlined-top-line-transition-duration: .2s;
  --text-outlined-right-line-transition-duration: .2s;  
  --text-outlined-bottom-line-transition-duration: .2s;  
  --text-outlined-left-line-transition-duration: .2s;

  --text-outlined-top-line-transition-delay: .35s;
  --text-outlined-right-line-transition-delay: .25s;
  --text-outlined-bottom-line-transition-delay: .15s;
  --text-outlined-left-line-transition-delay: 0s;  
  
  --text-outlined-top-line-transform-hover: translate3d(0, 0, 0);
  --text-outlined-right-line-transform-hover: translate3d(0 0, 0);  
  --text-outlined-bottom-line-transform-hover: translate3d(0, 0, 0);
  --text-outlined-left-line-transform-hover: translate3d(0, 0, 0);

  --text-outlined-top-line-transition-delay-hover: 0s;
  --text-outlined-right-line-transition-delay-hover: .15s;
  --text-outlined-bottom-line-transition-delay-hover: .25s;
  --text-outlined-left-line-transition-delay-hover: .35s;    
}

/*
=====
UNDERLINED TEXT
=====
*/

/*
basic
*/

.text-underlined{
  /*
  1. I use pixels units because others units (em, rem, vw, vh, etc) can
  lead to the mistake of displaying a circumcised line
  */

  --ui-text-underlined-line-height: var(--text-underlined-line-height, 2px); /* 1 */
  --ui-text-underlined-line-gap: var(--text-underlined-line-gap, .5rem);
  --ui-text-underlined-padding-bottom: calc(var(--ui-text-underlined-line-height) + var(--ui-text-underlined-line-gap));

  padding-bottom: var(--ui-text-underlined-padding-bottom) !important;
  position: var(--text-underlined-position, relative) !important;
}

.text-underlined:disabled{
  opacity: var(--text-flat-opacity-disabled, 0.5);
}

.text-underlined::after{
  content: "";
  width: var(--text-underlined-line-widht, 100%) !important;
  height: var(--ui-text-underlined-line-height) !important;

  background-color: var(--text-underlined-line-color, currentcolor) !important;

  position: absolute;
  left: var(--text-underlined-line-left, 0) !important;
  bottom: var(--text-underlined-line-bottom, 0) !important;
}

/*
adapters
*/

.text-underlined:not(.rlink, .rbutton){
  display: var(--text-underlined-display, inline-flex);
}

/*
text-underlined extension

1. 
The transition property isn't used because there are limits of the 
transition property syntax, particularly multiple values can't be used. 
*/

.text-underlined{
  overflow: hidden;
}

.text-underlined::after{
  transform: var(--text-underlined-line-transform);
  transition-property: var(--text-underlined-line-transition-property, transform); /* 1 */
  transition-duration: var(--text-underlined-line-transition-duration, .0s);  /* 1 */
  transition-timing-function: var(--text-underlined-line-transition-timing-function, ease-in); /* 1 */
  transition-delay: var(--text-underlined-line-transition-delay, 0s); /* 1 */
  will-change: var(--text-underlined-line-will-change, transform);
}

.text-underlined:is(a, button):hover::after{
  --text-underlined-line-transform: var(--text-underlined-line-transform-hover);
  --text-underlined-line-transition-property: var(--text-underlined-line-transition-property-hover);
  --text-underlined-line-transition-duration: var(--text-underlined-line-transition-duration-hover);
  --text-underlined-line-transition-timing-function: var(--text-underlined-line-transition-timing-function-hover);
  --text-underlined-line-transition-delay: var(--text-underlined-line-transition-delay-hover);
  --text-underlined-line-will-change: var(--text-underlined-line-will-change-hover);
}

/*
modifiers
*/

.text-underlined_v3{
  --text-underlined-line-transform: translate3d(-105%, 0, 0);
  --text-underlined-line-transform-hover: translate3d(0, 0, 0);
}

.text-underlined_v4{
  --text-underlined-line-transform: translate3d(0, 105%, 0);
  --text-underlined-line-transform-hover: translate3d(0, 0, 0);
}

/*
=====
FLAT TEXT
=====
*/

/* 
basic
*/ 

.text-flat{
  position: relative;
  z-index: 0;
}

.text-flat:disabled{
  opacity: var(--text-flat-opacity-disabled, 0.5);
}

.text-flat::before, 
.text-flat::after{
  content: "";
  background-color: var(--text-flat-background-color, currentcolor);	
  position: absolute;
  z-index: -1;
}

.text-flat__label{
  padding: var(--text-flat-padding, .25rem);
}

/* 
flat text extension

1. 
The transition property isn't used because there are limits of the 
transition property syntax, particularly multiple values can't be used. 
*/ 

.text-flat{
  --ui-text-flat-planes-default-opacity: var(--text-flat-planes-default-opacity, 0);
  --ui-text-flat-planes-default-transition-property: var(--text-flat-planes-default-transition-property, transform, opacity);
  --ui-text-flat-planes-default-transition-duration: var(--text-flat-planes-default-transition-duration, .2s);  
  --ui-text-flat-planes-default-transition-timing-function: var(--text-flat-planes-default-transition-timing-function,  ease-out);
  --ui-text-flat-planes-default-transition-delay: var(--text-flat-planes-default-transition-delay, 0, .03s);

  --ui-text-flat-default-color-hover: var(--text-flat-default-color-hover, #fff);
  
  overflow: hidden;
  transition-property: var(--text-flat-transition-property, color); /* 1 */
  transition-duration: var(--text-flat-first-plane-transition-duration, .3s); /* 1 */
  transition-timing-function: var(--text-flat-transition-timing-function, ease-out); /* 1 */
  transition-delay: var(--text-flat-transition-delay); /* 1 */
}

.text-flat__label{
  display: block;
}

.text-flat::before{
  width: var(--ui-text-flat-first-plane-width, var(--text-flat-first-plane-width, auto));
  height: var(--ui-text-flat-first-plane-height, var(--text-flat-first-plane-height, auto));

  top: var(--ui-text-flat-first-plane-top, var(--text-flat-first-plane-top, auto));
  right: var(--ui-text-flat-first-plane-right, var(--text-flat-first-plane-right, auto));
  bottom: var(--ui-text-flat-first-plane-bottom, var(--text-flat-first-plane-bottom, auto));
  left: var(--ui-text-flat-first-plane-left, var(--text-flat-first-plane-left, auto));

  opacity: var(--ui-text-flat-first-plane-opacity, var(--text-flat-first-plane-top, var(--ui-text-flat-planes-default-opacity)));	
  transform: var(--ui-text-flat-first-plane-transform, var(--text-flat-first-plane-transform));
  transition-property: var(--ui-text-flat-first-plane-transition-property, var(--text-flat-first-plane-transition-property, var(--ui-text-flat-planes-default-transition-property))); /* 1 */
  transition-duration: var(--ui-text-flat-first-plane-transition-duration, var(--text-flat-first-plane-transition-duration, var(--ui-text-flat-planes-default-transition-duration))); /* 1 */  
  transition-timing-function: var(--ui-text-flat-first-plane-transition-timing-function, var(--text-flat-first-plane-transition-timing-function, var(--ui-text-flat-planes-default-transition-timing-function))); /* 1 */
  transition-delay: var(--ui-text-flat-first-plane-transition-delay, var(--text-flat-first-plane-transition-delay, var(--ui-text-flat-planes-default-transition-delay))); /* 1 */
}

.text-flat::after{
  width: var(--ui-text-flat-second-plane-width, var(--text-flat-second-plane-width, auto));
  height: var(--ui-text-flat-second-plane-height, var(--text-flat-second-plane-height, auto));

  top: var(--ui-text-flat-second-plane-top, var(--text-flat-second-plane-top, auto));
  right: var(--ui-text-flat-second-plane-right, var(--text-flat-second-plane-right, auto));
  bottom: var(--ui-text-flat-second-plane-bottom, var(--text-flat-second-plane-bottom, auto));
  left: var(--ui-text-flat-second-plane-left, var(--text-flat-second-plane-left, auto));

  opacity: var(--ui-text-flat-second-plane-opacity, var(--text-flat-second-plane-top, var(--ui-text-flat-planes-default-opacity)));	
  transform: var(--ui-text-flat-second-plane-transform, var(--text-flat-second-plane-transform));
  transition-property: var(--ui-text-flat-second-plane-transition-property, var(--text-flat-second-plane-transition-property, var(--ui-text-flat-planes-default-transition-property))); /* 1 */
  transition-duration: var(--ui-text-flat-second-plane-transition-duration, var(--text-flat-second-plane-transition-duration, var(--ui-text-flat-planes-default-transition-duration))); /* 1 */  
  transition-timing-function: var(--ui-text-flat-second-plane-transition-timing-function, var(--text-flat-second-plane-transition-timing-function, var(--ui-text-flat-planes-default-transition-timing-function))); /* 1 */
  transition-delay: var(--ui-text-flat-second-plane-transition-delay, var(--text-flat-second-plane-transition-delay, var(--ui-text-flat-planes-default-transition-delay))); /* 1 */
}

.rlink.text-flat:hover{
  --rlink-color: var(--text-flat-color-hover, var(--ui-text-flat-default-color-hover));
}

.rbutton.text-flat:hover{
  --rbutton-color: var(--text-flat-color-hover, var(--ui-text-flat-default-color-hover));
}

.text-flat:is(a, button):hover{
  --ui-text-flat-first-plane-width: var(--text-flat-first-plane-width-hover, var(--text-flat-first-plane-width));
  --ui-text-flat-first-plane-height: var(--text-flat-first-plane-height-hover, var(--text-flat-first-plane-height));

  --ui-text-flat-first-plane-top: var(--text-flat-first-plane-top-hover, var(--text-flat-first-plane-top));
  --ui-text-flat-first-plane-right: var(--text-flat-first-plane-right-hover, var(--text-flat-first-plane-right));
  --ui-text-flat-first-plane-bottom: var(--text-flat-first-plane-bottom-hover, var(--text-flat-first-plane-bottom));
  --ui-text-flat-first-plane-left: var(--text-flat-first-plane-left-hover, var(--text-flat-first-plane-left));
  
  --ui-text-flat-first-plane-opacity: var(--text-flat-first-plane-opacity-hover, var(--text-flat-first-plane-opacity));
  --ui-text-flat-first-plane-transform: var(--text-flat-first-plane-transform-hover, var(--text-flat-first-plane-transform));
  --ui-text-flat-first-plane-transition-property: var(--text-flat-first-plane-transition-property-hover, var(--text-flat-first-plane-transition-property));
  --ui-text-flat-first-plane-transition-duration: var(--text-flat-first-plane-transition-duration-hover, var(--text-flat-first-plane-transition-duration));
  --ui-text-flat-first-plane-transition-timing-function: var(--text-flat-first-plane-transition-timing-function-hover, var(--text-flat-first-plane-transition-timing-function));
  --ui-text-flat-first-plane-transition-delay: var(--text-flat-first-plane-transition-delay-hover, var(--text-flat-first-plane-transition-delay));
  
  --ui-text-flat-second-plane-width: var(--text-flat-second-plane-width-hover, var(--text-flat-second-plane-width));
  --ui-text-flat-second-plane-height: var(--text-flat-second-plane-height-hover, var(--text-flat-second-plane-height));

  --ui-text-flat-second-plane-top: var(--text-flat-second-plane-top-hover, var(--text-flat-second-plane-top));
  --ui-text-flat-second-plane-right: var(--text-flat-second-plane-right-hover, var(--text-flat-second-plane-right));
  --ui-text-flat-second-plane-bottom: var(--text-flat-second-plane-bottom-hover, var(--text-flat-second-plane-bottom));
  --ui-text-flat-second-plane-left: var(--text-flat-second-plane-left-hover, var(--text-flat-second-plane-left));
  
  --ui-text-flat-second-plane-opacity: var(--text-flat-second-plane-opacity-hover, var(--text-flat-second-plane-opacity));
  --ui-text-flat-second-plane-transform: var(--text-flat-second-plane-transform-hover, var(--text-flat-second-plane-transform));
  --ui-text-flat-second-plane-transition-property: var(--text-flat-second-plane-transition-property-hover, var(--text-flat-second-plane-transition-property));
  --ui-text-flat-second-plane-transition-duration: var(--text-flat-second-plane-transition-duration-hover, var(--text-flat-second-plane-transition-duration));
  --ui-text-flat-second-plane-transition-timing-function: var(--text-flat-second-plane-transition-timing-function-hover, var(--text-flat-second-plane-transition-timing-function));
  --ui-text-flat-second-plane-transition-delay: var(--text-flat-second-plane-transition-delay-hover, var(--text-flat-second-plane-transition-delay));
}

/*
modifiers
*/

.text-flat_v9{
  --text-flat-first-plane-width: 51%;
  --text-flat-first-plane-height: 100%;
  --text-flat-first-plane-top: 0;
  --text-flat-first-plane-left: 0;  
  --text-flat-first-plane-transform: translate3d(-100%, 0, 0);
  --text-flat-first-plane-transition-duration: .28s;
  --text-flat-first-plane-transition-delay: 0 .28s;
  --text-flat-second-plane-transition-delay: 0 .28s;

  --text-flat-second-plane-width: 51%;
  --text-flat-second-plane-height: 100%;
  --text-flat-second-plane-top: 0;
  --text-flat-second-plane-right: 0;
  --text-flat-second-plane-transform: translate3d(100%, 0, 0);
  --text-flat-second-plane-transition-duration: .28s;

  --text-flat-first-plane-transform-hover: translate3d(0, 0, 0);
  --text-flat-first-plane-opacity-hover: 1;
  --text-flat-second-plane-transform-hover: translate3d(0, 0, 0);
  --text-flat-second-plane-transition-duration-hover: .18s;
  --text-flat-second-plane-opacity-hover: 1;
}

.text-flat_v10{
  --text-flat-first-plane-width: 100%;
  --text-flat-first-plane-height: 51%;
  --text-flat-first-plane-top: 0;
  --text-flat-first-plane-left: 0;  
  --text-flat-first-plane-transform: translate3d(0, -50%, 0);
  --text-flat-first-plane-transition-duration: .28s;

  --text-flat-second-plane-width: 100%;
  --text-flat-second-plane-height: 51%;
  --text-flat-second-plane-bottom: 0;
  --text-flat-second-plane-left: 0;
  --text-flat-second-plane-transform: translate3d(0, 50%, 0);
  --text-flat-second-plane-transition-duration: .28s;

  --text-flat-first-plane-transform-hover: translate3d(0, 0, 0);
  --text-flat-first-plane-opacity-hover: 1;
  --text-flat-second-plane-transform-hover: translate3d(0, 0, 0);
  --text-flat-second-plane-transition-duration-hover: .18s;
  --text-flat-second-plane-opacity-hover: 1;
}

.text-flat_v11{
  --text-flat-first-plane-width: 51%;
  --text-flat-first-plane-height: 100%;
  --text-flat-first-plane-top: 0;
  --text-flat-first-plane-left: 0;
  --text-flat-first-plane-transform: rotate(360deg);
  --text-flat-first-plane-transition-duration: .35s;

  --text-flat-second-plane-width: 51%;
  --text-flat-second-plane-height: 100%;
  --text-flat-second-plane-top: 0;
  --text-flat-second-plane-right: 0;
  --text-flat-second-plane-transform: rotate(360deg);
  --text-flat-second-plane-transition-duration: .35s;

  --text-flat-first-plane-transform-hover: rotate(0);
  --text-flat-first-plane-opacity-hover: 1;
  --text-flat-second-plane-transform-hover: rotate(0);
  --text-flat-second-plane-opacity-hover: 1;
}

.text-flat_v12{
  --text-flat-first-plane-width: 51%;
  --text-flat-first-plane-height: 100%;
  --text-flat-first-plane-transform: translate3d(-100%, 0, 0) rotate(-45deg);
  --text-flat-first-plane-transition-duration: .35s;

  --text-flat-second-plane-width: 51%;
  --text-flat-second-plane-height: 100%;
  --text-flat-second-plane-right: 0;
  --text-flat-second-plane-transform: translate3d(100%, 0, 0) rotate(-45deg);
  --text-flat-second-plane-transition-duration: .35s;

  --text-flat-first-plane-transform-hover: translate3d(0, 0, 0) rotate(0);
  --text-flat-first-plane-opacity-hover: 1;  
  --text-flat-second-plane-transform-hover: translate3d(0, 0, 0) rotate(0);
  --text-flat-second-plane-opacity-hover: 1;
}

/*
=====
SLIDING TEXT
=====
*/

/* 
This component doesn't have basic styles because any reasons aren't.

1. 
The transition property isn't used because there are limits of the 
transition property syntax, particularly multiple values can't be used. 
*/ 

.text-sliding{
  --ui-text-sliding-default-color: var(--text-sliding-default-color, currentcolor);
  --ui-text-sliding-default-transition-property: var(--text-sliding-default-transition-property, transform);
  --ui-text-sliding-default-transition-duration: var(--text-sliding-default-transition-duration, .35s);  
  --ui-text-sliding-default-transition-delay: var(--text-sliding-default-transition-delay);
  --ui-text-sliding-default-transition-timing-function: var(--text-sliding-default-transition-timing-function, cubic-bezier(.86, .6, .08, 1.01)); 
  --ui-text-sliding-default-will-change: var(--text-sliding-default-will-change, transform);

  position: relative;
  overflow: hidden;
}

.text-sliding:not(.rlink, .rbutton){
  display: var(--text-sliding-display, inline-flex);
}

.text-sliding:disabled{
  opacity: var(--text-flat-opacity-disabled, 0.5);
}

.text-sliding::before{
  content: attr(data-text-sliding);
  position: absolute;
  color: var(--text-sliding-back-color, var(--ui-text-sliding-default-color));

  transform: var(--text-sliding-back-transform);
  transition-property: var(--text-sliding-back-transition-property, var(--ui-text-sliding-default-transition-property)); /* 1 */
  transition-timing-function: var(--text-sliding-back-transition-timing-function, var(--ui-text-sliding-default-transition-timing-function)); /* 1 */
  transition-duration: var(--text-sliding-back-transition-duration, var(--ui-text-sliding-default-transition-duration)); /* 1 */
  transition-delay: var(--text-sliding-back-transition-delay, var(--ui-text-sliding-default-transition-delay)); /* 1 */
  will-change: var(--text-sliding-back-will-change, var(--ui-text-sliding-default-will-change));
}

.text-sliding__label{
  display: var(--text-sliding-front-display, block);
  color: var(--text-sliding-front-color, var(--ui-text-sliding-default-color));

  transform: var(--text-sliding-front-transform);
  transition-property: var(--text-sliding-front-transition-property, var(--ui-text-sliding-default-transition-property)); /* 1 */
  transition-duration: var(--text-sliding-front-transition-duration, var(--ui-text-sliding-default-transition-duration)); /* 1 */
  transition-timing-function: var(--text-sliding-front-transition-timing-function, var(--ui-text-sliding-default-transition-timing-function)); /* 1 */
  transition-delay: var(--text-sliding-front-transition-delay, var(--ui-text-sliding-default-transition-delay)); /* 1 */
  will-change: var(--text-sliding-front-will-change, var(--ui-text-sliding-default-will-change));
}

/*
modifiers
*/

.text-sliding_v7{
  --text-sliding-back-transform: translate3d(-110%, 0, 0);
  --text-sliding-front-transform: translate3d(0, 0, 0);
}

.text-sliding_v7:is(a, button):hover{
  --text-sliding-back-transform: translate3d(0, 0, 0);
  --text-sliding-front-transform: translate3d(110%, 0, 0);
}

.text-sliding_v8{
  --text-sliding-back-transform: translate3d(0, 140%, 0);
  --text-sliding-front-transform: translate3d(0, 0, 0);
}

.text-sliding_v8:is(a, button):hover{
  --text-sliding-back-transform: translate3d(0, 0, 0);
  --text-sliding-front-transform: translate3d(0, -140%, 0);
}

/*
SETTINGS
*/

:root{
  --text-outlined-weight: 5px;
  --text-outlined-line-color: #000;
  --text-outlined-padding: 1rem 1.25rem;
  --text-underlined-line-height: 1px;
  --text-underlined-line-gap: 0rem;
  --text-underlined-line-color: #000;
  --text-flat-background-color: #000;
  --text-flat-padding: .75rem;
}

/*
=====
DEMO
=====
*/

body{
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
  margin: 0;
}

.section{
  padding: 7.25rem 1rem 6.5rem;
  position: relative;
}

.section:nth-child(odd){
  background-color: #f1f4fa;
}

.section__label{
  padding: .5rem 1.5rem;
  
  font-size: 1rem;
  color: #4e4848;
  letter-spacing: .075rem;
  font-weight: 700;
  font-variant-caps: small-caps;
  
  position: absolute;
  top: 0;
  left: 0;

}

.section:nth-child(odd) .section__label{
  background-color: #fff;
}

.section:nth-child(even) .section__label{
  background-color: #f1f4fa;
}

.section__group{
  margin: .25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #243aab;
  text-align: center;
}

@media (min-width: 641px){
  
  .section{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1rem;
  }
}