// The code snippets in this file are derived from the Halcyon theme
// - https://github.com/dbarenholz/halcyon-obsidian?tab=readme-ov-file

body {
  --tab-text-color: var(--flexcyon-base-05);
  --tab-text-color-focused: var(--flexcyon-base-05);
  --tab-text-color-active: var(--text-accent);
  --tab-text-color-focused-active: var(--text-accent);
  --tab-text-color-focused-active-current: var(--text-accent);
  --tab-divider-color: var(--titlebar-background);

  --tab-outline-width: 0px;
  --tab-curve: 0px;
  --tab-radius: 0px;
  --tab-radius-active: 0px;
  --flexcyon-anim-duration: 0.3s;

  --flexcyon-anim-easing: ease-in-out;
  --flexcyon-anim-slide-amount: 56.63105px;
  --flexcyon-anim-rotate-amount: 50deg;

  --flexcyon-view-header-breadcrumb-max-w: 12.5vw;

  .view-header-breadcrumb {
    max-width: var(--flexcyon-view-header-breadcrumb-max-w);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

body.flexcyon-workspace-angled-layout {
  .view-header-breadcrumb-separator {
    display: none;
  }

  .view-header-title {
    transform: skewX(-22.5deg);
    border-radius: 0px;
    background-color: var(--color-base-20);
    padding: 4px 12px;
  }

  .view-header-title-parent {
    transform: skewX(-22.5deg);
  }

  .view-header-title-parent .view-header-breadcrumb {
    padding: 4px 12px;
    background-color: var(--color-base-05);
  }
}

body.flexcyon-flex-max-mode,
body.flexcyon-workspace-pl10k-layout {
  .view-header-title-parent {
    :nth-of-type(5n + 1) {
      background-color: var(--color-base-20);
      &::after {
        background-color: var(--color-base-25);
      }
    }

    :nth-of-type(5n + 3) {
      background-color: var(--color-base-25);
      &::after {
        background-color: var(--color-base-05);
      }
    }

    :nth-of-type(5n) {
      background-color: var(--color-base-05);
      &::after {
        background-color: var(--color-base-20);
      }
    }
    :has(+ :last-child)::after {
      background-color: var(--color-base-05);
    }
  }
  .view-header-title-container:not(:has(.view-header-breadcrumb))
    .view-header-title {
    border-radius: var(--flexcyon-callout-radix);
  }

  .view-header-title-parent :first-child.view-header-breadcrumb {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    padding-left: 12px;
  }

  .view-header-title-parent .view-header-breadcrumb {
    padding: 4px 0px;

    &::after {
      padding: 10px 6px;
      content: "e";
      position: relative;
      width: inherit;
      height: inherit;
      color: transparent;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 70% 50%);
    }
  }

  .view-header-title {
    padding: 4px 12px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    background-color: var(--color-base-05);
  }
  .view-header-breadcrumb-separator {
    display: none;
  }
  .view-header,
  .view-header-title-container {
    gap: 0px;
  }
}

body.flexcyon-workspace-card-layout {
  .view-header-breadcrumb-separator {
    display: none;
  }
  .view-header-breadcrumb {
    border-radius: var(--flexcyon-callout-radix);
    padding: 4px 8px;
  }
  .view-header-title-container {
    gap: 8px;
  }

  .view-header-title-parent {
    gap: 8px;
    :nth-of-type(5n + 1) {
      background-color: var(--color-base-20);
    }

    :nth-of-type(5n + 3) {
      background-color: var(--color-base-25);
    }

    :nth-of-type(5n) {
      background-color: var(--color-base-05);
    }
    :has(+ :last-child)::after {
      background-color: var(--color-base-05);
    }
  }
  .view-header-title {
    padding: 4px 8px;
    background-color: var(--color-base-05);
    border-radius: var(--flexcyon-callout-radix);
  }
}

@mixin anims-def($anim-name, $transform-1, $transform-2) {
  @keyframes #{$anim-name} {
    0% {
      opacity: 0;
      transform: $transform-1;
    }
    100% {
      opacity: 1;
      transform: $transform-2;
    }
  }
}

@include anims-def(
  slide-in-left,
  translateX(calc(var(--flexcyon-anim-slide-amount) * -1)),
  translateX(0)
);
@include anims-def(
  slide-in-right,
  translateX(var(--flexcyon-anim-slide-amount)),
  translateX(0)
);
@include anims-def(
  slide-in-tb,
  translateY(calc(var(--flexcyon-anim-slide-amount) * -1)),
  translateY(0)
);
@include anims-def(
  slide-in-bt,
  translateY(var(--flexcyon-anim-slide-amount)),
  translateY(0)
);
@include anims-def(
  spin-in-rl,
  rotateY(var(--flexcyon-anim-rotate-amount)),
  rotateY(0)
);
@include anims-def(
  spin-in-bt,
  rotateX(var(--flexcyon-anim-rotate-amount)),
  rotateX(0)
);

@keyframes scale-up {
  0% {
    opacity: 0;
    scale: 0.33;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@mixin anims-wrapper($anim-class, $anim-type, $is-flex-max: 0) {
  body.flexcyon-anims-#{$anim-class} {
    .modal .community-modal-info,
    .modal .vertical-tab-content,
    .mod-stacked
      .workspace-leaf.mod-active
      .workspace-leaf-content:not([data-type="file-explorer"]),
    .modal,
    .prompt {
      animation: $anim-type var(--flexcyon-anim-duration)
        var(--flexcyon-anim-easing);
    }
  }
  body.flexcyon-anims-#{$anim-class}.flexcyon-anim-style-settings-contain {
    .style-settings-container {
      animation: $anim-type var(--flexcyon-anim-duration)
        var(--flexcyon-anim-easing);
    }
  }
  @if ($is-flex-max == 1) {
    body.flexcyon-flex-max-mode {
      .modal .community-modal-info,
      .modal .vertical-tab-content,
      .mod-stacked
        .workspace-leaf.mod-active
        .workspace-leaf-content:not([data-type="file-explorer"]),
      .modal,
      .style-settings-container,
      .prompt {
        animation: $anim-type
          var(--flexcyon-anim-duration)
          var(--flexcyon-anim-easing);
      }
    }
  }
}

@include anims-wrapper(scale-up, scale-up);
@include anims-wrapper(slide-rtl, slide-in-right);
@include anims-wrapper(slide-ltr, slide-in-left, 1);
@include anims-wrapper(slide-tb, slide-in-tb);
@include anims-wrapper(slide-bt, slide-in-bt);
@include anims-wrapper(spin-rl, spin-in-rl);
@include anims-wrapper(spin-bt, spin-in-bt);
