.FormControl-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.ComposerFailureModal-output {
  white-space: break-spaces;
}

.flarum-package-manager-Page .ExtensionPage-settings .Form-group:last-child {
  display: none;
}

.PackageManager-lastUpdatedAt {
  color: @control-color;

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

.PackageManager-updaterControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-area: controls;
}

.PackageManager-extensions {
  &-grid {
    --gap: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(~"100% / 3 - var(--gap)"));
    gap: var(--gap);
    margin-top: 16px;
  }
}

.PackageManager-extension {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: @control-bg;
  padding: 8px;
  border-radius: @border-radius;

  &-controls {
    margin-left: auto;
  }

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

  &-name {
    font-weight: bold;
  }

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

    &-latest {
      border-radius: 30px;
      padding: 0 6px;
      font-weight: bold;

      &--minor {
        background-color: @alert-success-bg;
        color: @alert-success-color;
      }

      &--major {
        background-color: @alert-bg;
        color: @alert-color;
      }
    }
  }

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

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

.PackageManager-majorUpdate {
  border: 2px solid @control-danger-color;
  border-radius: @border-radius;
  padding: 16px;
  background-color: lighten(@control-danger-bg, 5.5);
  display: grid;
  grid-template-areas:
    "logo title"
    "logo helpText"
    "logo controls";
  grid-gap: 0 16px;
  align-items: center;

  > img {
    grid-area: logo;
  }

  > label {
    grid-area: title;
  }

  > .helpText {
    grid-area: helpText;
  }
}