// Modals

.modal {

  .btn {
    padding: 0 22px;
    margin-inline-end: .5rem;
    font-size: 1rem;
    line-height: 2.3rem;
    color: var(--template-text-dark);
    background: var(--white);
    border-color: var(--whiteoffset);
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .25);
  }

  .btn-primary:not([href]),
  .btn-success:not([href]),
  .btn-danger:not([href]),
  .btn-secondary:not([href]) {
    color: var(--template-text-dark);
    background: var(--white);
    border: 1px solid var(--template-text-dark);
  }

  .btn-primary:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--primary);
      border-color: var(--primary);
    }
  }

  .btn-secondary:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--secondary);
      border-color: var(--secondary);
    }
  }

  .btn-success:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--success);
      border-color: var(--success);
    }
  }

  .btn-danger:not([href]) {
    &:hover,
    &:focus {
      color: var(--white);
      background: var(--danger);
      border-color: var(--danger);
    }
  }

  .btn.btn-danger {
    [class^="#{$jicon-css-prefix}-"],
    [class*=" #{$jicon-css-prefix}-"],
    [class^="#{$fa-css-prefix}-"],
    [class*=" #{$fa-css-prefix}-"],
    span {
      display: inline-block;
      width: 2.375rem;
      height: 100%;
      margin: 0 16px;
      margin-inline-start: -22px;
      line-height: 2.375rem;
      color: hsla(0, 0%, 100%, .9);
      background-color: var(--danger);
    }
  }

  .btn.btn-success {
    [class^="#{$jicon-css-prefix}-"],
    [class*=" #{$jicon-css-prefix}-"],
    [class^="#{$fa-css-prefix}-"],
    [class*=" #{$fa-css-prefix}-"],
    span {
      display: inline-block;
      width: 2.375rem;
      height: 100%;
      margin: 0 16px;
      margin-inline-start: -22px;
      line-height: 2.375rem;
      color: hsla(0, 0%, 100%, .9);
      background-color: var(--success);
    }
  }
}

.modal-header {
  padding: 0 15px;
}

.modal-body {
  overflow-y: initial;
}

.modal-title {
  font-weight: $font-weight-normal;
  line-height: $modal-header-height;
}

.contentpane {
  padding: 20px;
}

// Changelog
.changelog {
  text-align: start !important;

  &__item {
    display: flex;
    border-bottom: 1px solid $table-border-color;

    @include media-breakpoint-down(md) {
      flex-direction: column;
    }
  }

  &__tag {
    flex: 1 0 180px;
    max-width: 180px;
    padding: 10px 15px;
    text-align: end;
    background: darken($gray-100, 2.5%);
    border-right: 1px solid $table-border-color;

    .badge {
      border-radius: .2rem;

      &.badge-jlanguage {
        background-color: $white;
      }
    }

    @include media-breakpoint-down(md) {
      flex: 1 0 auto;
      max-width: 100%;
      text-align: left;
      border-right: 0;
      border-bottom: 1px solid $table-border-color;
    }
  }

  &__list {
    padding: 10px 15px;

    ul {
      padding-inline-start: 15px;
      margin-bottom: 0;
    }

    li {
      margin-bottom: .15rem;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}