.extensionManager {
  padding-top: 14px;
  padding-bottom: 20px;
  height: 100%;
  overflow: hidden;
  :global {
    .extension-list {
      padding-right: 20px;
      overflow-y: auto;
      overflow-x: hidden;
      height: calc(100vh - 150px);
    }

    .result {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      grid-gap: 10px;
      padding-bottom: 50px;
    }

    .extension-card {
      user-select: none;
      border: 1px solid rgba(71, 71, 71, 0.10);
      border-radius: 4px;
      padding: 10px;
      background-color: var(--backgroundColorL1);
      transition: var(--transition);
      position: relative;
      height: 130px;
      .update-badge {
        position: absolute;
        bottom: 4px;
        right: 4px;
        font-size: 10px;
        opacity: .5;
      }
      &:hover {
        background-color: var(--backgroundColorL2);
      }
      &.disabled {
        opacity: .6;
      }
      .description {
        font-size: 12px;
        opacity: .5;
        line-height: 1.2;
        max-height: 60px;
        overflow: hidden;
        img {
          max-width: 100%;
          height: auto;
        }
        a {
          color: white;
          pointer-events: none;
        }
        * {
          line-height: 1.2;
          background-color: transparent !important;
          color: white !important;
        }
      }
    }
  }
}

.extensionTitleBar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  :global {
    .icon {
      $size: 30px;
      width: $size;
      height: $size;
      border-radius: $size;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--primaryColor);
      margin-right: 10px;
      flex-shrink: 0;
      svg {
        * {
          fill: white;
          opacity: 1;
        }
      }
    }
    .text {
      flex: 1;
      font-size: 16px;
      >div {
        word-break: break-all;
        text-wrap: nowrap;
        max-width: 232px;
        padding-right: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .author {
        margin-top: -4px;
        opacity: .6;
        font-size: 11px;
      }
    }
  }
}

.extensionModal {
  :global {
    .description {
      line-height: 1.2;
      opacity: .8;
      max-height: 300px;
      overflow-y: auto;
      font-size: 14px;
      p {
        border-radius: 4px;
        padding: 8px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    }
    pre {
      background-color: var(--backgroundColor);
      padding: 10px;
      border-radius: 10px;
      max-height: 300px;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 12px;
    }
    .footer-actions {
      margin-top: 20px;
    }
  }
}