// Variables
$path-chevron-z-index: -1;
$path-chevron-top: px-to-rem(4px);
$path-chevron-right: px-to-rem(-12px);
$path-chevron-dimension: px-to-rem(24px);
$path-chevron-border-radius: px-to-rem(10px);
$path-chevron-tip-border-radius: px-to-rem(2px);
$path-button-right-padding: 1.25 * $grid-size;
$path-chevron-drop-shadow: drop-shadow(0 0 px-to-rem(1px) $blue-500);
$path-chevron-transformation: rotate(45deg) skew(14deg, 14deg);
$path-chevron-right-margin: px-to-rem(14px);

// Mixins
@mixin gl-path-active-item-color($color) {
  @include gl-text-white;
  background-color: $color;

  &::after {
    background-color: $color;
  }
}

@mixin gl-path-chevron {
  content: '';
  @include gl-absolute;
  @include gl-reset-bg;
  top: $path-chevron-top;
  right: $path-chevron-right;
  width: $path-chevron-dimension;
  z-index: $path-chevron-z-index;
  height: $path-chevron-dimension;
  transform: $path-chevron-transformation;
  border-top-left-radius: $path-chevron-border-radius;
  border-bottom-right-radius: $path-chevron-border-radius;
  border-top-right-radius: $path-chevron-tip-border-radius;
}

.gl-path-nav {
  @include gl-relative;
  @include gl-display-flex;

  .gl-path-nav-list {
    @include gl-p-1;
    @include gl-m-0;
    @include gl-relative;
    @include gl-list-style-none;
    @include gl-display-inline-flex;
    @include gl-overflow-hidden;
  }

  .gl-path-nav-list-item {
    @include gl-overflow-hidden;
    @include gl-min-w-fit-content;

    &:focus-within {
      filter: $path-chevron-drop-shadow;
    }
  }

  .gl-path-button {
    @include gl-pl-5;
    @include gl-py-3;
    @include gl-display-flex;
    @include gl-relative;
    @include gl-font-base;
    @include gl-z-index-0;
    @include gl-border-none;
    @include gl-text-gray-500;
    @include gl-font-weight-bold;
    @include gl-line-height-normal;
    @include gl-rounded-top-left-base;
    @include gl-rounded-bottom-left-base;
    background-color: var(--path-bg-color);
    padding-right: $path-button-right-padding;
    margin-right: $path-chevron-right-margin;

    &::after {
      @include gl-path-chevron;
    }

    &:hover {
      @include gl-path-active-item-color($gray-100);
      @include gl-text-gray-900;
    }

    &:active,
    &:focus,
    &:focus:active {
      @include gl-focus;
    }
  }

  .gl-path-fade {
    @include gl-w-8;
    @include gl-h-full;
    @include gl-bottom-0;
    @include gl-absolute;
    @include gl-z-index-2;
    @include gl-text-gray-500;

    &-left {
      @include gl-left-0;
      @include gl-bg-gradient-blur(left, var(--path-bg-color));
    }

    &-right {
      @include gl-right-0;
      @include gl-text-right;
      @include gl-bg-gradient-blur(right, var(--path-bg-color));
    }
  }

  .gl-clear-icon-button {
    @include gl-p-0;
    @include gl-text-gray-400;
    @include gl-h-full;

    .gl-icon {
      @include gl-vertical-align-middle;
    }
  }

  .gl-path-active-item-indigo,
  .gl-path-active-item-indigo:hover {
    @include gl-path-active-item-color($theme-indigo-700);
  }

  .gl-path-active-item-blue,
  .gl-path-active-item-blue:hover {
    @include gl-path-active-item-color($theme-blue-500);
  }

  .gl-path-active-item-light-blue,
  .gl-path-active-item-light-blue:hover {
    @include gl-path-active-item-color($theme-light-blue-500);
  }

  .gl-path-active-item-red,
  .gl-path-active-item-red:hover {
    @include gl-path-active-item-color($theme-red-500);
  }

  .gl-path-active-item-light-red,
  .gl-path-active-item-light-red:hover {
    @include gl-path-active-item-color($theme-light-red-500);
  }

  .gl-path-active-item-green,
  .gl-path-active-item-green:hover {
    @include gl-path-active-item-color($theme-green-500);
  }
}