/* Techconcept blok 



*/

/* <div useBlockProps>
  <div class="tcblock <?php echo $attributes['default-state'] ? 'open' : '';?> <?php echo $attributes['variant'];?>">
    <div class="blade-holder">
      
    <div class="blade blade-bottom">
      
      <div class="label"><?php echo esc_html($attributes['nazev-bloku']);?></div>
      <div class="icon arrow"><?php
    echo file_get_contents(
      get_stylesheet_directory() . '/images/ArrowCircle.svg'
    );
  ?></div>
    </div>
    <?php if ($attributes['display-top']):?>
      <div class="blade blade-top"><?php echo $attributes['top-text'];?></div>
      <?php endif;?>
    <div class="icon blade-joint"><?php
    echo file_get_contents(
      get_stylesheet_directory() . '/images/TechConceptIcon.svg'
    );
  ?></div>
    </div>
    <div class="content-holder">
      <div class="label"><h2><?php echo esc_html($attributes['nazev-bloku']);?></h2></div>
      <div class="content">
        <InnerBlocks />    
      </div>
    </div>
	  
	</div>
</div>*/

body {
  --tcblock-blade-width: 500px;
}

.tcblock {
  display: flex;
  gap: 60px;
  margin-bottom: 120px;
}

.tcblock .blade-holder {
  flex: 0 0 60px;
  width: 60px;
  position: relative;
  font-size: 16px;
  text-transform: uppercase;
}

.tcblock .blade-holder .blade {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tcblock-blade-width);
  height: 60px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 14px;  
  padding-left: 70px;
}

.tcblock.light .blade-holder .blade-top {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-secondary);
}

.tcblock.dark .blade-holder .blade-top {
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-primary);
}

.tcblock.light .blade-holder .blade-bottom {
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-primary);
}

.tcblock.dark .blade-holder .blade-bottom {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-secondary);
}

.tcblock .blade-holder .blade-top.multiline {
  font-size: 13px;
}

  /* otocit o 90 stupnu */
.tcblock .blade-holder .blade-bottom {
  transform: rotate(0deg);
  transform-origin: 30px 30px;
  /* delay pro animaci */
  transition: transform 0.5s ease-in-out, padding-left 0.5s ease-in-out !important;

}

.tcblock.open .blade-holder .blade-bottom {
  padding-left: 85px;
  transform: rotate(90deg);
}
.tcblock .blade-holder .blade-bottom .icon.arrow {
  cursor: pointer;
  transition: transform 0.5s ease-in-out !important;
}
.tcblock.open .blade-holder .blade-bottom .icon.arrow {
  transform: rotate(-90deg);
}

/* posledni open .tcblock na strance bude mit .arrow nahoru, tedy rotate 90deg */
.tcblock.last.open .blade-holder .blade-bottom .icon.arrow {
  transform: rotate(90deg);
}

.tcblock .blade-holder .blade-joint {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  padding: 6px;
  cursor: pointer;
}

.tcblock .blade-holder .icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin: 6px;
}

.tcblock .blade-holder .icon svg {
  width: 100%;
  height: 100%;
  fill: var(--e-global-color-primary);
}

.tcblock.dark .blade-holder .icon svg {
  fill: var(--e-global-color-secondary);
} 

.tcblock.light .blade-holder .icon.blade-joint svg {
  fill: var(--e-global-color-secondary);
}

.tcblock.dark .blade-holder .icon.blade-joint svg {
  fill: var(--e-global-color-secondary);
}

.tcblock.dark .blade-holder:has(.blade-top) .icon.blade-joint svg {
  fill: var(--e-global-color-primary);
}

.tcblock .blade-holder .blade .label {
  flex: 1;
  font-size: 16px;
  text-transform: uppercase;
}

.tcblock .content-holder {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.tcblock.open .content-holder {
}