.commerce-account-sidebar-wrapper {
  position: sticky;
  top: var(--nav-height);
}

.commerce-account-sidebar-content {
  background-color: var(--ui-surface-flat-high);

  .commerce-account-sidebar--list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;

    @media (width >= 1024px) {
      gap: var(--sizing-s);
    }

    .commerce-account-sidebar--list-item {
      padding: var(--sizing-m) var(--sizing-s) var(--sizing-m) 0;
      display: flex;
      align-items: center;
      gap: var(--sizing-m);
      position: relative;
      text-decoration: none;

      @media (width >= 768px) and (width < 1024px) {
        border-bottom: 1px solid var(--nexa-tertiary-light-grey);
      }

      @media (width >= 1024px) {
        padding: 28px var(--sizing-l);
      }

      &::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        position: absolute;
        right: 12px;
        background: center / contain no-repeat url('/genuine-parts/icons/arrow_next.svg');

        @media (width >= 1024px) {
          display: none;
        }
      }

      .commerce-account-sidebar--icon-wrapper {
        padding: var(--sizing-2xs);
        border-radius: 12px;
        background-color: var(--nexa-tertiary-light-grey);
        display: flex;
        align-items: center;
        width: 24px;
        height: 24px;

        @media (width >= 1024px) {
          background-color: transparent;
          padding: 0;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          filter: brightness(0) saturate(100%);
        }
      }

      .commerce-account-sidebar--title {
        color: var(--nexa-primary-main);
        font-size: var(--fs-small);
        font-weight: var(--fw-500);
        line-height: var(--lh-medium);
        letter-spacing: 0.14px;

        @media (width >= 768px) {
          font-size: var(--fs-medium);
          line-height: var(--lh-small);
          color: var(--neutrals-headings);
        }

        @media (width >= 1024px) {
          color: var(--subtitle-text);
          font-weight: var(--fw-700);
          line-height: var(--lh-normal);
          text-transform: uppercase;
        }
      }

      &.item--selected {
        @media (width >= 1024px) {
          border: 1px solid var(--primary-color);
        }

        .commerce-account-sidebar--title {
          color: var(--primary-color);
        }

        .commerce-account-sidebar--icon-wrapper img {
          filter: none;
        }
      }
    }
  }
}

/* Common Styling fro Profile SideBar wrapper */
.fragment-container.commerce-account-sidebar-container {
  padding: 0 var(--sizing-l);

  .fragment-wrapper {
    padding: var(--sizing-m) 0;

    @media (width >= 768px) {
      padding: var(--sizing-xl) 0;
    }

    @media (width >= 1024px) {
      padding: 0;
    }
  }

  .default-content-wrapper {
    padding: var(--sizing-xl) 0;
    margin-top: 0;

    @media (width >= 768px) {
      padding: var(--spacing-big) 0;
    }

    @media (width >= 1024px) {
      padding: 0;
    }
  }

  .commerce-account-sidebar-content {
    display: flex;
  }

  @media (width >= 1024px) {
    display: flex;
    gap: var(--sizing-xl);
    padding: var(--spacing-large) var(--container-margin) 26px;
  }
}

body.profile {
  .fragment-wrapper + div {
    display: none;

    @media (width >= 1024px) {
      display: flex;
      width: 100%;
    }

    .block {
      @media (width >= 1024px) {
        width: 100%;
      }
    }
  }
}

body.profile.profile-child {
  .fragment-wrapper {
    display: none;

    @media (width >= 1024px) {
      display: flex;
    }
  }

  .fragment-wrapper + div {
    display: flex;
    flex: 1;

    .block {
      width: 100%;
    }
  }
}