@layer components {
  .template {
    --sidebar-transition-duration: 0.3s;
    --sidebar-transition-timing: ease;
    --sidebar-width: 304px;
    --sidebar-width-collapse: 80px;
    --sidebar-default-width: 304px;
    --header-height: 70px;
  }

  @media (max-width: 64rem) {
    .template {
      --sidebar-width: 304px;
      --header-height: 60px;
    }
  }

  .template .kt-header {
    height: var(--header-height);
  }

  .template .kt-sidebar {
    width: var(--sidebar-width);
  }

  .template.kt-header-fixed .kt-wrapper {
    padding-top: var(--header-height);
  }

  @media (min-width: 64rem) {
    .template .kt-sidebar {
      width: var(--sidebar-width);
      transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    }

    .template .kt-sidebar .kt-sidebar-header {
      height: var(--header-height);
    }

    .template .kt-sidebar .kt-sidebar-wrapper {
      width: var(--sidebar-default-width);
    }

    .template .kt-sidebar .kt-sidebar-logo {
      width: var(--sidebar-default-width);
    }

    .template .kt-sidebar .small-logo {
      display: none;
    }

    .template.kt-sidebar-fixed .kt-wrapper {
      padding-inline-start: var(--sidebar-width) !important;
    }

    .template.kt-sidebar-fixed.kt-header-fixed .kt-header {
      inset-inline-start: var(--sidebar-width) !important;
    }

    .template.kt-sidebar-fixed.kt-header-fixed .kt-wrapper {
      padding-top: var(--header-height);
    }

    .template.kt-sidebar-collapse {
      --sidebar-width: var(--sidebar-width-collapse);
    }

    .template.kt-sidebar-collapse .kt-sidebar {
      transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    }

    .template.kt-sidebar-collapse .kt-sidebar.animating {
      pointer-events: none;
    }

    .template.kt-sidebar-collapse .kt-sidebar:hover:not(.animating) {
      width: var(--sidebar-default-width);
      transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    }

    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .default-logo {
      display: none;
    }

    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .small-logo {
      display: flex;
    }

    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-link .kt-menu-title,
    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-link .kt-menu-arrow,
    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-link .kt-menu-badge,
    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-label .kt-menu-title,
    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-label .kt-menu-arrow,
    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-label .kt-menu-badge {
      display: none;
    }

    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-accordion {
      display: none;
    }

    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-heading {
      visibility: hidden;
      position: relative;
    }

    .template.kt-sidebar-collapse .kt-sidebar:not(:hover) .kt-menu > .kt-menu-item > .kt-menu-heading::before {
      content: "...";
      color: currentColor;
      font-size: inherit;
      position: absolute;
      visibility: visible;
      display: inline-block;
      bottom: 50%;
      inset-inline-start: 0;
      margin-inline-start: 0.225rem;
      transform: translateX(100%);
    }

    .template.kt-sidebar-collapse .kt-sidebar .kt-sidebar-content {
      overflow: hidden;
    }
  }

  .template .kt-wrapper {
    transition: padding-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
  }

  .template .kt-header {
    transition: inset-inline-start var(--sidebar-transition-duration) var(--sidebar-transition-timing);
  }
}