/* src/css/themes/rubick/side-menu.css */
.rubick {
  .side-menu {
    @media (min-width: 80rem) {
      &.side-menu--collapsed {
        &.side-menu--on-hover {
          .side-menu__group-label {
            color: currentColor;
            &:before {
              opacity: 0%;
            }
          }
          .side-menu__link {
            .side-menu__link__title {
              color: currentColor;
            }
            .side-menu__link__badge {
              opacity: 1;
            }
            .side-menu__link__chevron {
              opacity: 1;
            }
          }
          ul.scrollable {
            > li {
              > .side-menu__link {
                .side-menu__link__icon {
                  margin-left: 0;
                }
              }
            }
          }
        }
        .side-menu__group-label {
          position: relative;
          color: transparent;
          transition-property:
            color,
            background-color,
            border-color,
            outline-color,
            text-decoration-color,
            fill,
            stroke;
          transition-duration: 100ms;
          &:before {
            content: "...";
            position: absolute;
            text-align: center;
            left: 0;
            right: 0;
            color: var(--color-background);
            transition-property: opacity;
            transition-duration: 100ms;
          }
        }
        .side-menu__link {
          .side-menu__link__title {
            white-space: nowrap;
            color: transparent;
            transition-property: color;
            transition-duration: 300ms;
          }
          .side-menu__link__badge {
            opacity: 0;
            transition-property: opacity;
            transition-duration: 300ms;
          }
          .side-menu__link__chevron {
            opacity: 0;
            transition-property: opacity;
            transition-duration: 300ms;
          }
          .side-menu__link__icon {
            transition-property: margin;
            transition-duration: 100ms;
          }
        }
        ul.scrollable {
          > li {
            > .side-menu__link {
              .side-menu__link__icon {
                margin-left: 0.625rem;
              }
            }
          }
        }
      }
      ul.scrollable {
        > li {
          > .side-menu__link {
            &.side-menu__link--active {
              margin-bottom: 0.875rem;
              margin-right: calc(1rem * -1);
              &:before {
                content: "";
                inset: 0;
                position: absolute;
                background: var(--color-background);
                @supports (color: color-mix(in lab, red, red)) {
                  background: color-mix(in oklch, var(--color-background), var(--color-foreground) 2%);
                }
                z-index: -1;
                --radius: 2em;
                border-block: var(--radius) solid #0000;
                border-radius: var(--radius) 0 0 var(--radius) / calc(2 * var(--radius));
                mask:
                  radial-gradient(
                    var(--radius) at 0 var(--radius),
                    #0000 99%,
                    #000 101%) 100% calc(-1 * var(--radius)) / var(--radius) 100% repeat-y,
                  conic-gradient(#000 0 0) padding-box;
                margin: calc(var(--radius) * -1) 0;
              }
              &:after {
                content: "";
                top: -1px;
                bottom: -1px;
                left: -1px;
                right: 1px;
                position: absolute;
                background: var(--color-background);
                @supports (color: color-mix(in lab, red, red)) {
                  background: color-mix(in oklch, var(--color-background), var(--color-foreground) 2%);
                }
                z-index: -2;
                --radius: 2em;
                border-block: var(--radius) solid #0000;
                border-radius: var(--radius) 0 0 var(--radius) / calc(2 * var(--radius));
                mask:
                  radial-gradient(
                    var(--radius) at 0 var(--radius),
                    #0000 99%,
                    #000 101%) 100% calc(-1 * var(--radius)) / var(--radius) 100% repeat-y,
                  conic-gradient(#000 0 0) padding-box;
                margin: calc(var(--radius) * -1) 0;
              }
              & > div:before {
                content: "";
                top: 0.5rem;
                bottom: calc(0.5rem * -1);
                left: 0.5rem;
                right: 1px;
                opacity: 0.2;
                position: absolute;
                background: var(--color-background);
                @supports (color: color-mix(in lab, red, red)) {
                  background: color-mix(in oklch, var(--color-background), var(--color-foreground) 2%);
                }
                z-index: -2;
                --radius: 2em;
                border-block: var(--radius) solid #0000;
                border-radius: var(--radius) 0 0 var(--radius) / calc(2 * var(--radius));
                mask:
                  radial-gradient(
                    var(--radius) at 0 var(--radius),
                    #0000 99%,
                    #000 101%) 100% calc(-1 * var(--radius)) / var(--radius) 100% repeat-y,
                  conic-gradient(#000 0 0) padding-box;
                margin: calc(var(--radius) * -1) 0;
              }
            }
          }
        }
      }
    }
    .side-menu__group-label {
      white-space: nowrap;
      font-size: 0.75rem;
      opacity: 0.5;
      margin-left: 0.5rem;
      margin-top: 1.75rem;
      margin-bottom: 0.75rem;
      text-transform: uppercase;
    }
    .side-menu__link {
      display: flex;
      align-items: center;
      margin-bottom: 0.375rem;
      padding: 1rem 1.25rem;
      transition-property: all;
      transition-duration: 100ms;
      &.side-menu__link--active {
        font-weight: 500;
        .side-menu__link__title {
          color: var(--color-background);
        }
      }
      .side-menu__link__icon {
        flex: none;
        width: 1.15rem;
        height: 1.15rem;
        --color: var(--color-background);
        @supports (color: color-mix(in lab, red, red)) {
          --color: color-mix( in oklch, var(--color-background), transparent 30% );
        }
      }
      .side-menu__link__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 0.75rem;
        color: var(--color-background);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklch, var(--color-background), transparent 20%);
        }
      }
      .side-menu__link__badge {
        min-width: 1.15rem;
        height: 1.2rem;
        padding: 0 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        margin-left: 0.875rem;
        font-weight: 500;
        color: var(--color-background);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklch, var(--color-background), transparent 20%);
        }
        background-color: var(--color-background);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklch, var(--color-background), transparent 85%);
        }
        border: 1px solid var(--color-background);
        @supports (color: color-mix(in lab, red, red)) {
          border: 1px solid color-mix(in oklch, var(--color-background), transparent 85%);
        }
        border-radius: 0.5rem;
      }
      .side-menu__link__chevron {
        margin-left: auto;
        stroke-width: 1.2;
        color: var(--color-background);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklch, var(--color-background), transparent 20%);
        }
      }
    }
    ul.scrollable {
      position: relative;
      > li {
        > .side-menu__link {
          border-radius: 9999px;
          &.side-menu__link--active {
            position: relative;
            color: var(--color-foreground);
            @media (min-width: 80rem) {
              .side-menu__link__icon {
                --color: var(--color-primary);
              }
              .side-menu__link__title {
                color: var(--color-primary);
              }
              .side-menu__link__chevron {
                margin-right: 1rem;
                color: var(--color-foreground);
                @supports (color: color-mix(in lab, red, red)) {
                  color: color-mix(in oklch, var(--color-foreground), transparent 20%);
                }
              }
              .side-menu__link__badge {
                color: var(--color-primary);
                @supports (color: color-mix(in lab, red, red)) {
                  color: color-mix(in oklch, var(--color-primary), transparent 20%);
                }
                background-color: var(--color-primary);
                @supports (color: color-mix(in lab, red, red)) {
                  background-color: color-mix(in oklch, var(--color-primary), transparent 85%);
                }
                border-color: var(--color-primary);
                @supports (color: color-mix(in lab, red, red)) {
                  border-color: color-mix(in oklch, var(--color-primary), transparent 85%);
                }
              }
            }
          }
          &:hover:not(.side-menu__link--active) {
            background: var(--color-background);
            @supports (color: color-mix(in lab, red, red)) {
              background: color-mix(in oklch, var(--color-background), transparent 92%);
            }
          }
        }
        ul {
          padding: 0.25rem 0;
          background: var(--color-background);
          @supports (color: color-mix(in lab, red, red)) {
            background: color-mix(in oklch, var(--color-background), transparent 90%);
          }
          border-radius: 1rem;
          border: 1px solid var(--color-background);
          @supports (color: color-mix(in lab, red, red)) {
            border: 1px solid color-mix(in oklch, var(--color-background), transparent 87%);
          }
          margin-left: 0.5rem;
          margin-right: 0.5rem;
          margin-bottom: 0.5rem;
          .side-menu__link {
            margin-bottom: 0;
          }
          ul {
            margin: 0px -1px;
          }
        }
      }
    }
  }
}
.dark {
  .side-menu {
    .side-menu__group-label {
      opacity: 0.3;
    }
    .side-menu__link {
      &:not(.side-menu__link--active) {
        --color-background: var(--color-foreground);
        @supports (color: color-mix(in lab, red, red)) {
          --color-background: color-mix( in oklch, var(--color-foreground), transparent 20% );
        }
      }
      &.side-menu__link--active {
        .side-menu__link__icon {
          --color: var(--color-foreground);
        }
        .side-menu__link__title {
          color: var(--color-foreground);
        }
      }
    }
    ul.scrollable {
      > li {
        > .side-menu__link {
          &.side-menu__link--active {
            .side-menu__link__icon {
              --color: var(--color-foreground);
            }
            .side-menu__link__title {
              color: var(--color-foreground);
            }
            .side-menu__link__badge {
              --color-primary: var(--color-foreground);
            }
            &:before {
              opacity: 0.7;
            }
            &:after {
              opacity: 0.2;
              --color-background: var(--color-foreground);
              @supports (color: color-mix(in lab, red, red)) {
                --color-background: color-mix( in oklch, var(--color-foreground), transparent 70% );
              }
            }
            & > div:before {
              background: var(--color-foreground);
              @supports (color: color-mix(in lab, red, red)) {
                background: color-mix(in oklch, var(--color-foreground), transparent 85%);
              }
            }
          }
          &:hover:not(.side-menu__link--active) {
            background: var(--color-foreground);
            @supports (color: color-mix(in lab, red, red)) {
              background: color-mix(in oklch, var(--color-foreground), transparent 95%);
            }
          }
        }
        ul {
          --color-background: var(--color-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            --color-background: color-mix( in oklch, var(--color-foreground), transparent 65% );
          }
        }
      }
    }
  }
}
/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */