// lesshint-disable spaceAroundComma
#vital-details {
  h3 {
    padding-bottom: 24px;
    padding-top: 32px;
    color: #192147;
    font-size: 24px;
    font-weight: 800;
    line-height: 120%;
    margin-bottom: 0px;
  }

  p {
    color: #515774;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0px;
  }


  [purpose='page-container'] {
    padding: 48px;
  }
  [purpose='page-content'] {
    margin-left: auto;
    margin-right: auto;
    max-width: 1104px;
  }
  [purpose='search-and-headline'] {
    margin-bottom: 48px;
  }


  [purpose='vitals-search'] {
    // 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: 8px 15px;
      height: 36px;
      margin: 0;
      width: 221px;
    }
    .DocSearch-Button:hover {
      box-shadow: none;
      border: 1px solid @core-fleet-black-25;
      color: @core-fleet-black-50;
    }
    .DocSearch-Search-Icon {
      margin-left: 0px;
      margin-right: 8px;
      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;
      line-height: 16px;
      font-weight: 400;
      padding-left: 0px;
    }
    [purpose='disabled-search'] {
      input {
        padding-top: 6px;
        padding-bottom: 6px;
        border: none;
        }
        &::placeholder {
          font-size: 16px;
          line-height: 24px;
          color: #8B8FA2;
        }
      .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;
      }
      .form-control {
        border-radius: 6px;
        padding: 6px;
        height: 36px;
        margin: 0;
        width: 212px;
      }
      .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;
      }
    }
    img {
      height: 16px;
      margin-right: 8px;
    }
    background: #FFF;
    &::placeholder {
      font-size: 16px;
      color: @core-fleet-black-50;
    }
  }

  [purpose='table-of-contents'] {
    margin-right: 16px;
    [purpose='vital-link'] {
      color: @core-fleet-black-75;
      font-family: Inter;
      font-size: 14px;
      line-height: 150%;
      width: 240px;
      text-decoration: none;
      padding: 4px 8px;
      &:hover {
        text-decoration: none;
        border-radius: 4px;
        background: #f6f7f8;
      }
      &.active {
        border-radius: 4px;
        background: #f6f7f8;
        color: @core-fleet-black;
      }
    }
  }

  [purpose='mobile-custom-select'] {
    display: flex;
    cursor: pointer;
    height: 48px;
    padding: 0px 12px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid var(--border-border-primary, #E2E4EA);
    background: var(--surface-surface-primary, #FFF);
    width: 100%;
    margin-bottom: 16px;
    margin-top: 16px;
    p {
      color: var(--text-text-brand, #192147);

      /* Body MD (FKA p) */
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; /* 150% */
    }
    img {
      height: 16px;
    }
    &:hover {
      border-radius: 6px;
      border: 1px solid var(--border-border-primary, #E2E4EA);
      background: var(--surface-surface-primary, #FFF);
      box-shadow: 0px 0px 0px 2px rgba(25, 33, 71, 0.05);
    }
  }








  [purpose='page-headline'] {
    max-width: 662px;
    margin-right: 16px;
    h2 {
      margin-bottom: 24px;
      color: #192147;
      font-size: 32px;
      font-weight: 800;
      line-height: 120%;
    }
    p {
      margin-bottom: 24px;
      color: #515774;
      font-size: 15px;
      line-height: 150%;
    }
  }
  .header-hidden { // For scrolling the sidebars with the sticky header
    transform: translateY(-81px);
  }
  [purpose='platform-filters'] {
    &.detected-windows {
      flex-direction: row-reverse;
    }
    flex-direction: row;
    border-bottom: 1px solid #E2E4EA;
    margin-bottom: 32px;
    padding-top: 8px;
    position: sticky;
    top: 81px;
    background: #FFF;
    z-index: 4;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    [purpose='platform-filter'] {
      width: 25%;
      display: flex;
      padding: 16px 40px 24px 40px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        height: 20px;
      }
      h1 {
        scroll-margin-top: 120px;
        color: #192147;
        text-align: center;
        margin-bottom: 0px;
        font-family: Inter;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        white-space: nowrap;
      }
      &.selected {
        border-bottom: 2px solid var(--text-text-brand, #192147);
        padding: 16px 40px 22px 40px;
        h1 {
          font-weight: 700;
        }
      }
      span {
        margin-left: 10px;
      }
    }
  }

  [purpose='vital-details-and-sidebar'] {
    padding-top: 32px;

  }

  [purpose='vital-name'] {
    color: #192147;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
    margin-bottom: 24px;
    margin-top: 16px;
  }
  [purpose='vital-description'] {
    color: #515774;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 0px;
    padding-bottom: 16px;
  }
  [purpose='vital-attribution'] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 16px;
    [purpose='contributor-profile-picture'] {
      width: 28.8px;
      height: 28.8px;
      margin-right: 8px;
      border-radius: 50%;
    }
    [purpose='contributor-profile-name'] {
      font-size: 14px;
      line-height: 150%;
    }
    [purpose='vital-link'] {
      color: unset;
      text-decoration: none;

      &:hover {
        text-decoration: none;
      }
    }


  }
  [purpose='vital-details'] {
    padding-left: 32px;
    max-width: 800px;
    width: 100%;
  }
  [purpose='vital-check'] {
    padding-bottom: 16px;
    [purpose='codeblock'] {
      margin-top: 24px;
      [purpose='codeblock-tabs'] {
        background: var(--UI-Fleet-Black-5, #F4F4F6);
        border-top: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
        border-radius: 4px 4px 0px 0px;
        height: 35px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
      }
      [purpose='codeblock-tab'] {
        border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
        cursor: pointer;
        height: 35px;
        padding: 8px 24px;
        color: #000;
        display: flex;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px; /* 150% */
        [purpose='new-badge'] {
          color: #FFF;
          font-family: 'Source Code Pro';
          font-size: 10px;
          font-style: normal;
          font-weight: 600;
          line-height: 11px; /* 110% */
          display: inline-flex;
          padding: 2px 8px;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          border-radius: var(--spacing-half, 4px);
          border: 1px solid var(--UI-Fleet-Black-50, #8B8FA2);
          background: var(--UI-Fleet-Black-50, #8B8FA2);
          height: 19px;
        }
        &.selected {
          [purpose='new-badge'] {
            height: 19px;
            border-radius: var(--spacing-half, 4px);
            border: 1px solid var(--color-brand-blue, #0587FF);
            background: var(--color-brand-blue, #0587FF);
          }
          background: #F9FAFC;
          border-radius: 4px 4px 0px 0px;
          border-top: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
          border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
          border-left: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
          border-bottom: 1px solid var(--UI-Fleet-Black-10, #F9FAFC);
        }
      }
      padding: 0;
      position: relative;
      [purpose='copy-button-tab'] {
        width: 100%;
        height: 35px;
        border-radius: 4px 4px 0px 0px;
        border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
        border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
      }
      [purpose='copy-button'] {
        position: absolute;
        top: 2px;
        right: 10px;
        border-radius: 8px;
        height: 32px;
        width: 32px;
        background: url('/images/icon-copy-16x16@2x.png');
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        &.copied {
          background: url('/images/icon-copy-clicked-checkmark-no-background-32x32@2x.png');
          background-size: 32px 32px;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }

    pre {
      width: 100%;
      max-width: 100%;
      padding: 16px 44px 16px 24px;
      border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
      border-left: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
      border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
      background: #F9FAFC;
      border-radius: 0px 0px 4px 4px;
      .ps, .sh {
        .hljs-keyword,
        .hljs-selector-tag,
        .hljs-name {
          color: #AE6DDF;
        }

        .hljs-symbol,
        .hljs-attribute,
        .hljs-function-keyword,
        .hljs-attr,
        .hljs-class,
        .hljs-title,
        .hljs-string,
        .hljs-type,
        .hljs-builtin-name,
        .hljs-selector-id,
        .hljs-selector-attr,
        .hljs-selector-pseudo,
        .hljs-addition,
        .hljs-variable,
        .hljs-template-variable {
          color: #4fd061;
        }
        .hljs-comment,
        .hljs-deletion,
        .hljs-meta {
          color: @core-fleet-black-50;
        }
      }
      code {
        color: #515774;
        &.has-linebreaks {
          white-space: break-spaces;
        }
        &.no-linebreaks {
          word-break: break-word;
          white-space: normal;
        }
        font-family: 'Source Code Pro';
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
        .hljs-keyword { // SQL keywords (SELECT, FROM, WHERE, IN, etc.)
          color: #AE6DDF;
        }
        [purpose='line-break']:not(:first-of-type)::before {
          content: '\a';
        }
        .hljs-attr { // For table and column names
          .hljs-keyword {
            color: #FFF;
          }
          .hljs-string { // For words wrapped in quotation marks
            color: #FFF;
          }
          color: #FFF;
          background-color: #AE6DDF;
          border-radius: 3px;
          white-space: pre;
          vertical-align: baseline;
          span {
            padding: 0;
          }
        }
        .hljs-number {
          color: #f5871f;
        }
        .hljs-string { // For words wrapped in quotation marks
          color: #4fd061;
          .hljs-keyword {
            color: #4fd061;
          }
        }
        background-color: @ui-off-white;
        border: none;
        padding: 0;
      }
    }

  }

  [purpose='discovery-table-note'], [purpose='powershell-note'] {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #B4B2FE;
    background: #F7F7FC;
    margin-bottom: 24px;
    img {
      width: 16px;
      height: 16px;
    }
    p {
      margin-bottom: 0px;
      color: #515774;

      /* Body SM (FKA Card text) */
      font-family: Inter;
      font-size: 14px;
      font-weight: 400;
      line-height: 150%;
    }
    code {
      color: #515774;
      font-family: 'Source Code Pro';
      font-size: 14px;
      line-height: 16px; /* 114.286% */
      border-radius: 2px;
      background: #F1F0FF;
      padding: 2px 1px;
    }
    a {
      color: #515774;
      font-family: Inter;
      font-size: 14px;
      font-weight: 400;
      line-height: 150%; /* 150% */
      text-decoration: underline #C5C7D1;
      text-underline-offset: 3px;
    }
  }
  [purpose='edit-button'] {
    img {
      width: 12px;
      height: 12px;
      display: inline;
      margin-left: 8px;
    }
    color: var(--UI-Fleet-Black-75, #515774);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    text-decoration: underline #C5C7D1;
    text-underline-offset: 4px;
  }
  [purpose='mobile-table-of-contents-header'] {
    color: #192147;
    font-size: 14px;
    font-weight: 800;
    line-height: 16.8px;
  }
  .modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    -webkit-transform: translate(-25%, 0%);
    transform: translate(-25%, 0%);
  }
  .modal.show .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  [parasails-component='modal'] {

    [purpose='modal-dialog'] {
      margin-left: 16px;
      margin-top: 16px;
      margin-bottom: 16px;
      [purpose='modal-content'] {
        display: flex;
        height: calc(~'100vh - 32px');
        margin-top: 0px;
        max-width: 366px;
        padding: 48px 19px 24px 24px;
        flex-direction: column;
        align-items: flex-start;
        // gap: 24px;
        flex-shrink: 0;
        [purpose='table-of-contents'] {
          margin-top: 16px;
          max-height: 100%;
          width: 100%;
          overflow-y: scroll;
          scrollbar-width: none;
          [purpose='vital-link'] {
            color: @core-fleet-black-75;
            font-family: Inter;
            font-size: 14px;
            line-height: 150%;
            width: 100%;
            text-decoration: none;
            padding: 4px 8px;
            &:hover {
              text-decoration: none;
              border-radius: 4px;
              background: #f6f7f8;
            }
            &.active {
              border-radius: 4px;
              background: #f6f7f8;
              color: @core-fleet-black;
            }
          }
        }
      }
    }
  }

  @media (max-width: 991px) {
    [purpose='page-container'] {
      padding: 32px 32px 64px 32px;
    }

    [purpose='breadcrumbs-and-search'] {
      margin-bottom: 32px;
    }

  }

  @media (max-width: 768px) {
    [purpose='breadcrumbs-and-search'] {
      max-width: 1072px;
      font-size: 14px;
      [purpose='breadcrumbs'] {
        margin-bottom: 24px;
      }
    }
    [purpose='vital-details'] {
      padding-left: 0px;
      max-width: 100%;
    }
    [purpose='vital-details-and-sidebar'] {
      padding-top: 0px;
    }
    [purpose='search-and-headline'] {
      margin-bottom: 32px;
    }
    [purpose='vitals-search'] {
      width: 100%;
      .DocSearch-Button {
        width: 100%;
      }
      [purpose='disabled-search'] {
        width: 100%;
      }
    }
  }

  @media (max-width: 575px) {
    [purpose='page-container'] {
      padding: 32px 24px 64px 24px;
    }
    [purpose='platform-filters'] {
      [purpose='platform-filter'] {
        padding: 16px 24px 24px 24px;
        &.selected {
          padding: 16px 24px 22px 24px;
        }
      }
    }
    [purpose='vital-check'] {
      [purpose='codeblock'] {
        [purpose='copy-button'] {
          top: 2px;
          right: 5px;
        }
      }
    }
    [parasails-component='modal'] {

      [purpose='modal-dialog'] {
        margin: 16px;
        width: 100%;
        max-width: calc(~'100% - 32px');
        [purpose='modal-content'] {
          max-width: 100%;
        }
      }
    }
  }


}
