#articles {
  [purpose='page-container'] {
    padding: 64px;
  }

  [purpose='categories-and-search'] {
    padding-top: 40px;
    padding-bottom: 40px;
    [purpose='search'] {
      border: 1px solid #C5C7D1;
      width: 320px;
      border-radius: 8px;
      height: 40px;
      img {
        display: flex;
        height: 16px;
        margin-top: 3px;
      }
    }
    [purpose='categories'] {
      [purpose='category-filter'] {
        display: flex;
        font-weight: 700;
        font-size: 16px;
        margin-right: 40px;
        cursor: pointer;
      }
      [purpose='category-filter'].selected {
        border-bottom: 2px solid @core-vibrant-blue;
      }
    }
  }
  [purpose='category-title'] {
    padding-bottom: 40px;
    p {
      margin-bottom: 0px;
    }
  }

  [purpose='guides-category-page'] {
    [purpose='category-title'] {
      margin-left: 12px;
      margin-right: 6px;
    }
  }
  [purpose='changelog-button'] {
    display: flex;
    padding: var(--spacing-spacing-xxs, 4px) var(--spacing-spacing-sm, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-spacing-xxs, 4px);
    border-radius: var(--spacing-spacing-xs, 8px);
    border: 1px solid var(--color-grey-200, #E2E4EA);
    background: var(--color-grey-50, #F9FAFC);
    color: #515774;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    text-decoration: none;
    width: 168px;
    margin-right: 8px;
    height: 37px;
    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    &:hover {
      color: #515774;
      text-decoration: none;
      border-radius: var(--spacing-spacing-xs, 8px);
      border: 1px solid var(--color-grey-400, #C5C7D1);
      background: var(--color-grey-100, #F2F2F5);
    }
  }
  [purpose='rss-button'] {
    padding: 4px 8px;
    cursor: pointer;
    display: inline;
    max-width: min-content;
    color: #192147;
    font-size: 14px;
    text-decoration: none;
    span::before {
      font-family: 'FontAwesome';
      content: '\f09e';
      color: #192147;
      padding-right: 8px;
      font-size: 16px;
    }
  }
  [purpose='rss-button'].copied::after {
    content: 'Link copied';
    display: flex;
    font-weight: 400;
    position: relative;
    top: 0px;
    height: 0px;
    font-size: 14px;
    color: @core-vibrant-blue;
    animation-name: copiedText;
    animation-duration: 4s;
    animation-fill-mode: forwards;
  }

  @keyframes copiedText {
    0% {opacity: 0;}
    20% {opacity: 100;}
    30% {opacity: 80;}
    50% {opacity: 60;}
    70% {opacity: 40;}
    80% {opacity: 20;}
    100% {opacity: 0;}
  }

  [purpose='search'] {
    width: 256px;
    // Note: We're using classes here to override the default Docsearch styles;
    button {
      width: 100%;
      cursor: text;
      margin: 0;
    }
    .DocSearch-Button {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      border: 1px solid @core-fleet-black-25;
      background-color: #FFF;
      padding: 6px;
      height: 36px;
      margin: 0;
      width: 256px;
    }
    .DocSearch-Button:hover {
      box-shadow: none;
      border: 1px solid @core-fleet-black-25;
      color: @core-fleet-black-50;
    }
    .DocSearch-Search-Icon {
      margin-left: 10px;
      height: 16px;
      width: 16px;
      color: @core-fleet-black-50;
      stroke-width: 3px;
    }
    .DocSearch-Button-Keys {
      display: none;
    }
    .input-group:focus-within {
      border: 1px solid @core-vibrant-blue;
    }
    .DocSearch-Button-Placeholder {
      font-size: 16px;
      font-weight: 400;
      padding-left: 12px;
    }
    [purpose='disabled-search'] {
      input {
        padding-top: 6px;
        padding-bottom: 6px;
        border: none;
        } &::placeholder {
          font-size: 16px;
          line-height: 24px;
        }
      .input-group {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border: 1px solid @core-fleet-black-25;
        background: #FFF;
      }
      .input-group:focus-within {
        border: 1px solid @core-vibrant-blue;
      }
      .docsearch-input {
        height: 100%;
        width: 98%;
      }
      .docsearch-input:focus-visible {
        outline: none;
      }
      .ds-input:focus {
        outline: rgba(0, 0, 0, 0);
      }
      .input-group-text {
        color: @core-fleet-black-50;
      }
      .form-control {
        height: 36px;
        padding: 0px;
        font-size: 16px;
      } &:focus {
        border: none;
      }
    }
  }

  [purpose='sidebar-and-articles'] {
    display: flex;
    flex-direction: row-reverse;
  }
  [purpose='sidebar'] {
    margin-left: 16px;
    min-width: 256px;
  }
  [purpose='nav-links'] {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    a {
      margin-bottom: 12px;
      display: block;
      color: var(--text-text-brand, #192147);

      /* Body SM (FKA Card text) */
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 142.857% */
      text-decoration: none;
    }
  }



  [purpose='sidebar-cta'] {
    padding: 0px;
    border-radius: 12px;
    border: 1px solid #E2E4EA;
    background: #FFF;
    min-height: 290px;
    text-align: center;
    cursor: pointer;
    margin-top: 24px;
    margin-bottom: 8px;
    max-width: 256px;
    a {
      text-decoration: none;
    }
    &:hover {
      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
    }
    [purpose='cta-image'] {
      height: 145px;
      background-image: url('/images/cloud-city-cta-256x145@2x.png');
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      background-size: 100% 145px;
      background-position: center bottom;
    }
    [purpose='cta-text'] {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0px 24px 24px 24px;
      h4 {
        color: #192147;
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        line-height: 120%;
        margin-bottom: 0px;
      }
      p {
        color: #515774;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
        margin-bottom: 8px;
      }
    }
    [purpose='cta-button'] {
      display: flex;
      width: 140px;
      height: 36px;
      padding: 16px 32px;
      justify-content: center;
      align-items: center;
      color: #FFF;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 150%;
      margin-bottom: 16px;
    }
    [purpose='cta-platform-icons'] {
      img {
        height: 16px;
        &:not(:last-of-type) {
          margin-right: 16px;
        }
      }
    }
  }

  [purpose='article-rows'] {
    padding-right: 32px;
    width: 100%;
  }
  [purpose='article-row'] {
    padding: 24px 0px;
    border-bottom: 1px solid #E2E4EA;
    cursor: pointer;
    text-decoration: none;
    color: unset;
    [purpose='animated-arrow'] {
      margin-left: 32px;
      stroke-width: 2px;
      height: 12px;
      width: 12px;
      fill: none;
      // stroke: #FF5C83; « Note: this is overridden by the arrow-color prop;
    }
    [purpose='arrow-line'] {
      opacity: 0;
      transition: opacity 10ms ease-out;
    }
    [purpose='chevron'] {
      transition: transform 200ms ease-out;
    }
    &:hover {
      text-decoration: none;
      [purpose='button-text'] {
        color: @core-fleet-black;
      }
      [purpose='arrow-line'] {
        opacity: 1;
        transition: opacity 300ms ease-out;
      }
      [purpose='chevron'] {
        transform: translateX(5px);
      }
    }
    [purpose='publish-date'] {
      font-size: 12px;
      padding-top: 8px;
      [parasails-component='js-timestamp'] {
        font-size: 12px;
      }
    }
  }

  [purpose='article-link'] {
    color: unset;
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }
  [purpose='article-name'] {
    margin-bottom: 0px;
    text-decoration: none;
    color: #192147;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
  }
  [purpose='article-description'] {
      color: #515774;
      /* Body SM (FKA Card text) */
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 21px; /* 150% */
      p {
        margin-top: 8px;
        margin-bottom: 8px;

      }
  }
  [purpose='articles'] {
    width: 100%;
    max-width: 100%;
    [purpose='article-card'] {
      a {
        text-decoration: none;
        color: @core-fleet-black-75;
      }
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 40px;
      border: none;
      border-radius: 16px;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
      img {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
      [purpose='article-card-body'] {
        padding: 24px 24px 32px 24px;
        [purpose='category-name'] {
          text-transform: uppercase;
          color: @core-fleet-black-50;
          font-size: 12px;
          font-weight: 700;
          line-height: 20px;
          text-decoration: none;
        }
        [purpose='article-title'] {
          display: block;
          text-decoration: none;
          color: @core-fleet-black;
          margin-bottom: 24px;
          h5 {
            font-weight: 700;
            font-size: 20px;
            line-height: 24px;
          }
        }
        [purpose='article-details'] {
          font-size: 14px;
          line-height: 20px;
          span {
            color: @core-fleet-black-50;
          }
          p {
            margin-bottom: 0px;
          }
        }
      }
    }
  }
  [purpose='guides'] {
    column-count: 3;
    margin-left: -10px;
    margin-right: 14px;
  }
  [purpose='guide-card'] {
    &:hover {
        box-shadow: 0px 4px 16px 0px #E2E4EA;
      }
    max-width: 343px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 24px;
    border-radius: 16px;
    box-shadow: none;
    border: 1px solid #E2E4EA;
    display: inline-block;
    img {
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
    a {
      text-decoration: none;
      color: @core-fleet-black-75;
    }
    [purpose='article-card-body'] {
      padding: 32px;
      [purpose='category-name'] {
        text-transform: uppercase;
        color: @core-fleet-black-50;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        text-decoration: none;
      }
      p {
        color: #515774;
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
      }
      [purpose='article-title'] {

        display: block;
        text-decoration: none;
        color: @core-fleet-black;
        margin-bottom: 16px;
        h5 {
          font-weight: 800;
          font-size: 16px;
          line-height: 120%;
        }
      }
      [purpose='article-details'] {
        font-size: 12px;
        line-height: 28px;
        span {
          color: @core-fleet-black-50;
        }
        p {
          margin-bottom: 0px;
        }
      }
    }
  }


  @media (min-width: 1200px) {
    [purpose='categories-and-search'] {
      margin-left: 10px;
      margin-right: 10px;
    }
    [purpose='category-title'] {
      padding-bottom: 40px;
      // margin-right: 35px;
    }
    [purpose='articles'] {
      [purpose='article-card'] {
        flex: 1 1 350px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 40px;
        border-radius: 16px;
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
        max-width: 370px;
      }
    }
  }

   @media (min-width: 991px) {

    [purpose='articles'] {
      [purpose='article-card'] {
        flex: 1 1 290px;
      }
    }
   }


   @media (max-width: 991px) {
    [purpose='page-container'] {
      padding: 64px 32px;
    }
    [purpose='guide-card'] {
      max-width: unset;
    }
    [purpose='categories-and-search'] {
      padding-top: 40px;
      [purpose='categories'] {
        [purpose='category-filter'] {
          padding-left: 8px;
          margin-bottom: 8px;
        }
        [purpose='category-filter'].selected {
          border-left: 2px solid @core-vibrant-blue;
          border-bottom: none;
          padding-left: 6px;
        }
      }
    }
    [purpose='search'] {
      width: 100%;
    }
    [purpose='sidebar-and-articles'] {
      display: flex;
      flex-direction: column;
    }
    [purpose='sidebar'] {
      margin-left: 0px;
    }
    [purpose='article-rows'] {
      padding-right: 0px;
      width: 100%;
    }
    [purpose='nav-links'] {
      margin-top: 0px;
      margin-bottom: 40px;
    }
    [purpose='sidebar-cta'] {
      display: none;
    }
    [purpose='articles'] {
      [purpose='article-card'] {
        flex: 1 1 330px;
        max-width: 50%;
      }
      margin-left: -10px;
      margin-right: -10px;
    }
    [purpose='search'] {
      .DocSearch-Button {
        margin-left: 24px;
        width: 200px;
      }
    }

  }


   @media (max-width: 767px) {

    [purpose='categories-and-search'] {
      [purpose='search'] {
        width: 100%;
      }
    }
    [purpose='changelog-button'] {
      margin-left: 0px;
      margin-bottom: 16px;
      width: 100%;
    }
    [purpose='category-title'] {
      margin-right: 0px;
      p {
        margin-bottom: 16px;
      }
    }
    [purpose='guides'] {
      column-count: 2;
    }
    [purpose='articles'] {
      margin: 0 auto;
      column-count: 2;
      [purpose='article-card'] {
        max-width: 100%;
      }
    }
    [purpose='search'] {
      .DocSearch-Button {
        margin-top: 0px;
        margin-left: 0px;
        width: 100%;
      }
    }
  }

   @media (max-width: 576px) {
    [purpose='page-container'] {
      padding: 32px 24px;
    }
    [purpose='guides'] {
      column-count: 1;
    }
    [purpose='articles'] {
      margin-left: -10px;
      margin-right: -10px;
      [purpose='article-card'] {
        flex: 1 1 auto;
        max-width: 100%;
      }
    }

    [purpose='guide-card'] {
      width: 100%;
    }
    [purpose='search'] {
      .DocSearch-Button {
        margin-top: 0px;
        margin-left: 0px;
        width: 100%;
      }
    }
  }
}
