@use '../../base/token';
@use '../../abstract';

.cds-board-widget {
  $this: &;

  &__getting-started {
    position: relative;

    img {
      user-select: none;
      width: 260px;
      height: auto;
    }
    
    .cta {
      position: absolute;
      right: 20px;
      bottom: 16px;
      color: var(--base-white);
      display: flex;
      align-items: center;
      gap: 2px;
    }
    
    .text {
      font-size: 12px;
      font-weight: 700;
    }

    .arrows {
      display: flex;
      position: relative;
      overflow: hidden;
      width: 16px;
      transition: all 0.3s ease;
    }

    svg {
      transition: transform 0.3s ease;
      
      &:first-child {
        transform: translateX(0);
      }
      
      &:last-child {
        position: absolute;
        left: 0;
        transform: translateX(-16px);
      }
    }

    &:hover .arrows {
      svg {
        &:first-child {
          transform: translateX(16px);
        }
        
        &:last-child {
          transform: translateX(0);
        }
      }
    }
  }

  &__table-of-contents {
    display: flex;
    flex-direction: column;
    width: 260px;

    .item {
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 12px;
      width: 100%;
      min-height: 44px;
      box-sizing: border-box;
      border-left: 1px solid var(--gray-100);

      &:hover {
        border-left: 1px solid var(--gray-700);
        box-shadow: inset 1px 0 0 var(--gray-700);

        .text {
          font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
          color: var(--gray-700);
        }
      }

      &.active {
        background: var(--gray-50);
        border-left: 1px solid var(--gray-700);
        box-shadow: inset 1px 0 0 var(--gray-700);

        .text {
          font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
          color: var(--gray-700);
        }
      }

      .text {
        font-size: var(--font-size-1);
        color: var(--gray-400);
        line-height: var(--line-height-9)px;
        text-align: left;
        width: 100%;
        word-break: break-word;
      }
    }
  }
}