// Import reusable custom scrollbar module
@import '../../../style/module/simplebar-scrollbar';

// Consolidated shortcut styles (moved from source/style/module/_shortcut.scss)
.short-cut {
  font-family: inherit;

  &__scroll-wrapper {
    max-height: 60vh;
    position: relative;
    
    // Apply custom scrollbar styling
    @extend .custom-scrollbar;
    
    // Disable horizontal scroll for shortcut widget
    .simplebar-track.simplebar-horizontal {
      display: none !important;
    }
    
    // Ensure vertical scroll is always visible when needed
    .simplebar-track.simplebar-vertical {
      opacity: 1 !important;
    }
  }

  .short-cut .shortcut-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: none;
    border: none;
  }
    
  // Drag handle specific properties only (highest specificity to override all button rules)
  .sub-nav__user .drag-handle.icon-grip-dots-vertical.icon.icon--fixed-width {
    cursor: grab !important;
    padding: 0 !important; // Override any inherited padding for precise alignment
    margin-top: 0.25rem !important; // Ensure consistent alignment with thumbtack
    margin: 0.25rem -4px 0 0 !important; // Include right margin to align with search box
    
    &:hover {
      cursor: grab !important; // Keep grab cursor on hover
    }
  }

  .short-cut .shortcut-fav-btn,
    &:hover {
      color: filled('foreground-theme') !important;
    }

  /* Thumbtack active state styling */
.shortcut-fav-btn.icon-thumbtack.icon--active {
  color: color('foreground-theme') !important; // Try foreground-theme for darker appearance
  margin-top: 0.25rem !important; // Ensure consistent alignment
  
  &:hover {
    color: color('foreground-theme-hover') !important;
  }
  
  &::before {
    color: color('foreground-theme') !important;
    background-color: transparent !important;
  }
  
  &:hover::before {
    color: color('foreground-theme-hover') !important;
    background-color: transparent !important;
  }
}

/* Thumbtack inactive state styling (Add to favorites button) */
.shortcut-fav-btn.icon-thumbtack.icon.icon--fixed-width:not(.icon--active) {
  color: color('foreground-secondary') !important;
  margin-top: 0.25rem !important; // Ensure consistent alignment
  
  &:hover {
    color: var(--color-foreground-secondary) !important;
    
    &::before {
      font-weight: 900 !important; // Make it solid/filled on hover
    }
  }
}

  /* Drag handle styling */
  button.drag-handle {
    margin: 0.25rem -4px 0 0 !important;
  }

  .icon-grip-dots-vertical::before {
    content: "\e411";
    font-size: 16px;
  }

  /* The item wrapper keeps the outer layout but we align children to the top of the row */
  &__item-wrapper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 8px;
    width: 100%;
  }


    &__link,
    .shortcut-link {
      color: inherit; 
      text-decoration: none;
      display: flex;
      flex-direction: column; // title above description
      width: 100%;
      flex: 1;

      &:hover,
      &:visited,
      &:active {
        color: inherit;
        text-decoration: none;
      }
    }

    &__description,
    .shortcut-description {
      margin: 0;
      font-size: 0.875rem;
      color: rgba(0, 0, 0, 0.6);
    }

    /* Keep outer wrapper centered, but align row content to the title */
    .shortcut-row {
      display: flex;
      align-items: flex-start; /* align title and actions to top */
      gap: 8px;
      width: 100%;
    }
    .shortcut {
      padding: spacing(-1);
      box-shadow: $shadow-style-front color('shadow');
      @include set-colors('interactive');

      &:hover {
        background-color: color('interactive-hover');
        outline: none;
      }

      &:active {
        box-shadow: $shadow-style-back color('shadow');
        outline: none;
      }

      &--highlighted {
        @include set-colors('theme');

        &:hover {
          background-color: color('theme-hover');
        }
      }

      p {
        line-height: line-height('single');
        margin: 0;
      }
    }

/* Project-specific overrides for mitstudie */
.shortcut-link {
  text-size-adjust: 100%;
  width: auto;
  word-wrap: break-word;
  white-space: normal;
  display: block;
  flex: 1;
}

.shortcut-title {
  font-size: 16px;
  color: black;
  font-weight: 400;
  line-height: 22.4px;
  margin: 0;
  padding: 0;
}

.shortcut-description {
  font-size: 13px;
  font-weight: 400;
  color: #8A9C8D;
  margin: 0;
  padding: 0;
}

  /* Empty state for when no favorites are selected - specific to shortcut widget */
  .empty-state {
    text-align: center;

    &__text {
      font-size: 18px;
      font-weight: 400;
      color: color('foreground');
      line-height: line-height('single');
    }

    &__text-secondary {
      font-size: 13px;
      font-weight: 400;
      color: #8A9C8D;
      margin: 0;
    }
  }
}