framework/extensions/package-manager/less/admin/ControlSection.less

.ExtensionManager-lastUpdatedAt {
  color: var(--control-color);

  &-label {
    font-weight: bold;
  }
}

.ExtensionManager-updaterControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-area: controls;
  margin-bottom: 16px;
}

.ExtensionManager-extensions {
  width: 100%;

  &-grid {
    --gap: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 310px);
    gap: var(--gap);
  }
}

.ExtensionManager-extension {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--control-bg);
  padding: 8px;
  border-radius: var(--border-radius);

  &-controls {
    margin-left: auto;
  }

  &-icon {
    --size: 40px;
  }

  &-name {
    font-weight: bold;
  }

  &-version {
    display: flex;
    align-items: center;
    gap: 8px;

    &-latest {
      text-transform: lowercase;
      padding: 2px 6px;
      font-size: 0.7rem;
    }
  }

  &--core {
    --bg-hover: darken(#e7672e, 5);
    background-color: #e7672e;
    color: #fff;
    --button-color: #fff;
    --button-bg-hover: var(--bg-hover);

    .Button--danger {
      color: #fff;
      --button-bg-hover: var(--bg-hover);
    }
  }

  &--core &-icon {
    background-size: 100%;
    background-color: transparent;
    filter: grayscale(1) brightness(3.5);
  }

  &--danger {
    background-color: var(--control-danger-bg);
  }
}

.ExtensionManager-majorUpdate {
  --space: 16px;
  padding: var(--space);
  display: grid;
  grid-template-areas:
    "title logo"
    "helpText logo"
    "controls logo";
  column-gap: 0 var(--space);
  align-items: center;

  &--failed&--incompatibleExtensions {
    grid-template-areas:
      "title logo"
      "helpText logo"
      "controls logo"
      "extensions extensions"
      "failure failure";
  }

  &--failed {
    grid-template-areas:
      "title logo"
      "helpText logo"
      "controls logo"
      "failure failure";
  }

  &--incompatibleExtensions {
    grid-template-areas:
      "title logo"
      "helpText logo"
      "controls logo"
      "extensions extensions";
  }

  > img {
    grid-area: logo;
  }

  > label {
    grid-area: title;
  }

  > .helpText {
    grid-area: helpText;
  }

  &-failure {
    --border-radius: 0;
    grid-area: failure;
    margin: var(--space) calc(~"0px - var(--space)") calc(~"0px - var(--space)");
  }

  &-incompatibleExtensions {
    grid-area: extensions;
    margin-top: var(--space);
    padding-top: var(--space);
    border-top: 1px solid var(--control-bg);
  }

  .ExtensionManager-updaterControls {
    margin: 0;
  }
}

.WhyNotModal {
  &-contents {
    overflow-x: auto;
  }
}

.ExtensionManager-installer .FormControl-container {
  max-width: 450px;

  .FormControl {
    width: 300px;
  }
}

.ExtensionManager-controlSection .container {
  max-width: 1030px;
  overflow: visible;
}

.ExtensionManager-primaryWarning ul {
  margin: 0;
}