<commit_before>@import '~amo/css/styles';

.Addon {
  @include page-padding();

  .Addon-summary-and-install-button-wrapper {
    .AMInstallButton,
    .InstallButton,
    .Button--get-firefox {
      @include respond-to(medium) {
        align-self: flex-end;
        margin-bottom: 12px;
      }
    }
  }
}

.Addon .Card {
  margin-bottom: $padding-page;

  @include respond-to(large) {
    margin-bottom: $padding-page-l;
  }
}

.Addon-icon {
  min-height: 72px;

  @include respond-to(medium) {
    min-height: 96px;
  }
}

.Addon-icon-wrapper {
  height: 48px;
  overflow: hidden;
  width: 48px;

  @include respond-to(medium) {
    height: 64px;
    overflow: hidden;
    width: 64px;
  }
}

.Addon-icon-image {
  height: auto;
  width: 100%;
}

.Addon-header-wrapper {
  @include respond-to(large) {
    display: flex;
  }
}

.Addon-header-info-card {
  @include respond-to(large) {
    @include margin-end($padding-page-l);

    width: 65%;
  }

  .Addon-header-install-error,
  .AddonCompatibilityError,
  .Addon-non-public-notice {
    margin: 0;
    margin-bottom: 12px;
  }
}

.Addon-header-meta-and-ratings {
  @include respond-to(large) {
    min-width: 300px;
    width: 35%;
  }
}

.Addon-title {
  @include font-regular();

  color: $black;
  font-size: $font-size-l;
  grid-column: 1 / span 2;
  line-height: 1.1;
  margin: 0 0 $padding-page-l;
  width: 100%;
  word-wrap: break-word;

  .Addon-theme & {
    margin: $padding-page-l 0;
  }

  @include respond-to(medium) {
    font-size: $font-size-xl;
  }
}

.Addon-author {
  @include font-light();

  display: block;
  padding-top: 3px;
  word-wrap: break-word;

  &,
  a,
  a:link {
    font-size: $font-size-m;
    font-weight: normal;
    text-decoration: none;

    @include respond-to(medium) {
      font-size: $font-size-l;
    }
  }
}

.Addon-header {
  display: grid;
  grid-template-columns: 1fr;
}

.Addon-summary-and-install-button-wrapper {
  grid-column: 1 / span 2;
  width: 100%;

  .Button {
    white-space: nowrap;
  }

  @include respond-to(extraLarge) {
    display: flex;
    justify-content: space-between;
  }
}

.Addon-summary {
  font-size: $font-size-m-smaller;
  overflow-x: auto;
  word-wrap: break-word;

  @include respond-to(medium) {
    @include margin-end(24px);

    max-width: 550px;
  }
}

.AddonDescription-contents {
  word-wrap: break-word;
}

.Addon .AMInstallButton,
.Addon .InstallButton {
  @include respond-to(medium) {
    @include margin-start(auto);

    align-content: center;
    align-self: center;
  }
}

.Addon .AMInstallButton-button,
.Addon .InstallButton-button,
.Button--get-firefox {
  width: 100%;

  @include respond-to(medium) {
    width: auto;
  }
}

// Details section with lots of grid stuff, on larger displays.
@include respond-to(large) {
  .Addon-details {
    display: grid;
    grid-auto-flow: column dense;
    grid-gap: 0 $padding-page-l;
    grid-template-columns: minmax(300px, 35%) auto;
    margin: 0;

    .Addon-main-content {
      grid-column: 2;
      // This span makes sure the left widget does not move vertically when
      // there is a long description.
      grid-row: 1 / span 100000;
      // Fixes screenshot overflow in FF 52 ESR.
      max-width: 100%;
      overflow-x: hidden;

      .Card:first-child {
        margin-top: 0;
      }
    }

    .AddonDescription-contents {
      max-width: 550px;<commit_msg>Fix install button width on medium+ screens (#6483)<commit_after>@import '~amo/css/styles';

.Addon {
  @include page-padding();

  .Addon-summary-and-install-button-wrapper {
    .AMInstallButton,
    .InstallButton,
    .Button--get-firefox {
      @include respond-to(medium) {
        align-self: flex-end;
        margin-bottom: 12px;
      }
    }
  }
}

.Addon .Card {
  margin-bottom: $padding-page;

  @include respond-to(large) {
    margin-bottom: $padding-page-l;
  }
}

.Addon-icon {
  min-height: 72px;

  @include respond-to(medium) {
    min-height: 96px;
  }
}

.Addon-icon-wrapper {
  height: 48px;
  overflow: hidden;
  width: 48px;

  @include respond-to(medium) {
    height: 64px;
    overflow: hidden;
    width: 64px;
  }
}

.Addon-icon-image {
  height: auto;
  width: 100%;
}

.Addon-header-wrapper {
  @include respond-to(large) {
    display: flex;
  }
}

.Addon-header-info-card {
  @include respond-to(large) {
    @include margin-end($padding-page-l);

    width: 65%;
  }

  .Addon-header-install-error,
  .AddonCompatibilityError,
  .Addon-non-public-notice {
    margin: 0;
    margin-bottom: 12px;
  }
}

.Addon-header-meta-and-ratings {
  @include respond-to(large) {
    min-width: 300px;
    width: 35%;
  }
}

.Addon-title {
  @include font-regular();

  color: $black;
  font-size: $font-size-l;
  grid-column: 1 / span 2;
  line-height: 1.1;
  margin: 0 0 $padding-page-l;
  width: 100%;
  word-wrap: break-word;

  .Addon-theme & {
    margin: $padding-page-l 0;
  }

  @include respond-to(medium) {
    font-size: $font-size-xl;
  }
}

.Addon-author {
  @include font-light();

  display: block;
  padding-top: 3px;
  word-wrap: break-word;

  &,
  a,
  a:link {
    font-size: $font-size-m;
    font-weight: normal;
    text-decoration: none;

    @include respond-to(medium) {
      font-size: $font-size-l;
    }
  }
}

.Addon-header {
  display: grid;
  grid-template-columns: 1fr;
}

.Addon-summary-and-install-button-wrapper {
  grid-column: 1 / span 2;
  width: 100%;

  .Button {
    white-space: nowrap;
  }

  @include respond-to(extraLarge) {
    display: flex;
    justify-content: space-between;
  }
}

.Addon-summary {
  font-size: $font-size-m-smaller;
  overflow-x: auto;
  word-wrap: break-word;

  @include respond-to(medium) {
    @include margin-end(24px);

    max-width: 550px;
  }
}

.AddonDescription-contents {
  word-wrap: break-word;
}

.Addon .AMInstallButton,
.Addon .InstallButton {
  @include respond-to(medium) {
    @include margin-start(auto);

    align-content: center;
    align-self: center;
  }
}

.Addon .AMInstallButton-button,
.Addon .InstallButton-button,
.Button--get-firefox {
  width: 100%;

  @include respond-to(medium) {
    width: auto;
  }
}

.Addon .AMInstallButton-loading-button {
  @include respond-to(medium) {
    width: 48px;
  }
}

// Details section with lots of grid stuff, on larger displays.
@include respond-to(large) {
  .Addon-details {
    display: grid;
    grid-auto-flow: column dense;
    grid-gap: 0 $padding-page-l;
    grid-template-columns: minmax(300px, 35%) auto;
    margin: 0;

    .Addon-main-content {
      grid-column: 2;
      // This span makes sure the left widget does not move vertically when
      // there is a long description.
      grid-row: 1 / span 100000;
      // Fixes screenshot overflow in FF 52 ESR.
      max-width: 100%;
      overflow-x: hidden;

      .Card:first-child {
        margin-top: 0;
      }
    }

    .AddonDescription-contents {
      max-width: 550px;
{'fraction_non_alphanumeric': 0.14971710430871898, 'fraction_numerical': 0.022921804729435658, 'mean_word_length': 2.51734693877551, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4530904', 'n_tokens_mistral': 2776, 'n_tokens_neox': 2572, 'n_words': 520}