:root {
  --topbar-bg-color: #ffffff;
  --topbar-color: #495057;
  --topbar-border-color: #ccc;
  --tab-bg-color: #f8f9fa;
  --tab-hover-bg-color: #e9ecef;
  --tab-active-bg-color: #4dabf725;
  --tab-active-border-color: var(--primary-color);
  --tab-active-color: var(--primary-color);
}

body.dark {
  --topbar-bg-color: #1e1e1e;
  --topbar-color: #e9ecef;
  --topbar-border-color: #2d2d2d;
  --tab-bg-color: #2d2d2d;
  --tab-hover-bg-color: #3d3d3d;
  --tab-active-bg-color: #4dabf720;
  --tab-active-border-color: var(--primary-color-light, #4dabf7);
  --tab-active-color: var(--primary-color-light, #4dabf7);
}

.p-tooltip-text {
  font-size: 0.875rem;
}

.layout-topbar {
  position: fixed;
  height: 50px;
  padding: 0 1rem;
  color: var(--topbar-color);
  z-index: 999;
  right: 0;
  background-color: var(--topbar-bg-color);
  @include transition(left $transitionDuration);
  border-bottom: 1px solid var(--topbar-border-color);
  display: flex;
  align-items: center;
  width: 100%;

  .logo-link {
    margin-right: 1rem;

    .logo-object {
      height: 25px;
      display: block;
    }
  }

  .layout-topbar-session {
    flex: 1;
    min-width: 0;
    margin-right: 1rem;
  }

  .session-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;

    // Skinny scrollbar styling
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: thin; /* IE and Edge */

    &::-webkit-scrollbar {
      height: 3px; /* Height for horizontal scrollbar */
      width: 3px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 10px;

      body.dark & {
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
  }

  .session-tab {
    background-color: var(--tab-bg-color);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 100px;
    max-width: 200px;
    font-size: 0.875rem;
    width: fit-content;
    border-left: 3px solid transparent;
    transition: all 0.1s ease;
    position: relative;

    &:hover {
      background-color: var(--tab-hover-bg-color);
      padding-right: 2rem;
    }

    &.active {
      background-color: var(--tab-active-bg-color);
      color: var(--tab-active-color);
      font-weight: 500;
    }

    &.active .unseen-count {
      background-color: var(--primary-color);
    }

    .session-tab-content {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      position: relative;
    }

    .subdomain {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0;
    }

    .unseen-count {
      background-color: gray;
      color: white;
      min-width: 1.2rem;
      height: 1.2rem;
      padding: 0 0.3rem;
      border-radius: 0.6rem;
      font-size: 0.7rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .close-tab {
      position: absolute;
      right: -1.5rem;
      padding: 0.2rem;
      width: 1.2rem;
      height: 1.2rem;
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: 4px;

      &:hover {
        background-color: rgba(0, 0, 0, 0.1);
        body.dark & {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }

      .pi {
        font-size: 0.75rem;
      }
    }

    &:hover .close-tab {
      display: inline-flex;
    }
  }

  .layout-topbar-icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .new-session-button {
      font-size: 0.875rem;
      font-weight: 500;

      &:hover {
        background-color: var(--primary-darker-color);
      }

      .pi {
        font-size: 0.875rem;
      }
    }

    .theme-toggle {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;

      &:hover {
        background-color: var(--tab-hover-bg-color);
      }
    }

    .layout-topbar-search {
      position: relative;
      width: 200px;

      input {
        width: 100%;
        padding: 0.35rem 1.75rem 0.35rem 0.6rem;
        border-radius: 4px;
        background-color: var(--tab-bg-color);
        border: 1px solid var(--topbar-border-color);
        color: var(--topbar-color);

        &:focus {
          border-color: var(--primary-color);
          box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
        }
      }

      .layout-topbar-search-icon {
        position: absolute;
        right: 0.6rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--topbar-color);
      }
    }
  }
}
