/* Theme presentation for Cimcorp custom blocks. */

/* Hexagon Icon */

.wp-block-cimcorp-hexagon-icon {
  display: flex;
	width: 3.0rem;
  position: relative;

	> svg {
		width: 100%;
		height: auto;
	}

  .wp-element-cimcorp-hexagon-icon__media {
    display: flex;
    position: absolute;
    inset: 0;

    img {
      display:block;
      width: 57%;
      height: 57%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      margin: auto;
    }
  }
}
@media (min-width: 600px) {

  .wp-block-cimcorp-hexagon-icon {
    width: 3.5rem;
  }
}

/* Anchor links */

.wp-block-cimcorp-anchor-links-container {
  --thickness: 0.25rem;
  position: sticky;
  top: 0;
  z-index: 300;
  border-top: 1px solid var(--wp--preset--color--mid-gray);
  border-bottom: 1px solid var(--wp--preset--color--mid-gray);
  margin-bottom: var(--wp--preset--spacing--6-xl);
  background: rgb(var(--wp--preset--color--rice-white) / 100%);
  overflow: hidden;
  transform: translateY(-1px);

  > .wp-block-cimcorp-anchor-links {
    border: none;
    padding: 0;
    transform: translateX(-1rem);
  }
}
@media (min-width: 783px) {

  body.admin-bar .wp-block-cimcorp-anchor-links-container {
    top: 32px;
  }
}
@media (max-width: 782px) {

  .wp-block-cimcorp-anchor-links-container {

    &:after {
      content: ' ';
      display: block;
      width: 3.5rem;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        to left,
        var(--wp--preset--color--rice-white) 0%,
        var(--wp--preset--color--rice-white) 2rem,
        transparent 100%
      );
      z-index: 60;
      pointer-events: none;
    }

    > .wp-block-cimcorp-anchor-links {
      width: max-content;
      min-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;

      /* optional */
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}

.wp-block-cimcorp-anchor-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;

  border-top: 1px solid var(--wp--preset--color--mid-gray);
  border-bottom: 1px solid var(--wp--preset--color--mid-gray);
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
  z-index: 20;

  .block-editor-block-list__layout {
    display: flex;
    position: static;
  }

  .block-list-appender {
    top: 0;
    bottom: 0;
    display: flex;
    align-self: center;
  }
}

.wp-block-cimcorp-anchor-link {
  display: flex;
  align-items: center;
  position: relative;

  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    transition: all var(--global-transition);
    background: var(--wp--preset--color--rich-black);
    opacity: 0;
    transform: translateY(2px);
  }

  &:after {
    content: "";
    display: inline-block;
    background: var(--wp--preset--color--mid-gray);
    width: 1px;
    height: 1rem;
  }

	&.is-active {

    &:before {
      opacity: 1;
      transform: translateY(0);
    }

    .animated-underline-child {
      background-size: 0% var(--underline-offset) !important;
    }
	}

  span[role="textbox"],
  a {
    color: var(--wp--preset--color--rich-black);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.14rem;
    line-height: 1.1;
    text-transform: uppercase;
    padding: 2rem 1rem;
    text-decoration: none !important;
    text-wrap: nowrap;

    span {
      padding: 0.25rem 0;
    }
  }
}

.wp-block-cimcorp-anchor-link:not(:has(+ .wp-block-cimcorp-anchor-link))::after {
  display: none;
}

.wp-element-cimcorp-anchor-links-backdrop,
.wp-element-cimcorp-anchor-links-backdrop-edge {
  max-width: unset;
  margin: unset !important;
  margin-block-start: unset !important;
}
@supports
  (backdrop-filter: blur(16px)) or
  (-webkit-backdrop-filter: blur(16px))
{

  .wp-block-cimcorp-anchor-links-container {
    background: hsl(0deg 0% 100% / 0.80);
  }

  .wp-element-cimcorp-anchor-links-backdrop {
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: linear-gradient(
      to bottom,
      var(--wp--preset--color--rice-white),
      transparent 50%
    );

    pointer-events: none;
  }

  .wp-element-cimcorp-anchor-links-backdrop-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--thickness);
    background: hsl(0deg 0% 100% / 0.1);
    -webkit-backdrop-filter: blur(12px) brightness(0.96);
    backdrop-filter: blur(12px) brightness(0.96);
    transform: translateY(100%);
    pointer-events: none;
  }
}
@supports
  (mask-image: none) or
  (-webkit-mask-image: none)
{

  .wp-element-cimcorp-anchor-links-backdrop {
    height: 200%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0% 50%,
      transparent 50% 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0% 50%,
      transparent 50% 100%
    );
  }

  .wp-element-cimcorp-anchor-links-backdrop-edge {
    height: 100%;
    inset: 0;
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0,
      black var(--thickness),
      transparent var(--thickness)
    );
    mask-image: linear-gradient(
      to bottom,
      black 0,
      black var(--thickness),
      transparent var(--thickness)
    );
  }
}