%ui-section {
  display: grid;
  grid-template-areas: "head head head" "side-start content side-end" "foot foot foot";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  max-height: 100%;
  overflow: hidden;
}

.ui-page {
  display: grid;
  grid-area: content;
  grid-template-areas: "title" "alert" "body" "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  @include enable-gpu();

  &__chat {
    display: inline-block;
    padding: 2px 8px 2px 10px;
    margin-left: 5px;
    border-radius: 4px;
    font-weight: bold;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
  }

  &__body {
    grid-area: body;
    @extend %ui-section;
  }

  &__footer {
    grid-area: footer;
  }

  div[slot="ribbon-content"] {
    margin: 15px 0;
    padding-right: 10px;
    padding-left: 10px;

    div.row {
      margin-top: 15px;
    }

    div.row,
    div.row>div {
      list-style-type: none;
    }

    div.row>div {
      display: inline-block;
      margin-left: 10px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .page-title {
      font-size: 1.5em;
    }

    div.row a.btn-floating {
      margin-left: 10px;
    }

    >.ui-button-detail {
      >ui-toolbar {
        .ui-toolbar__left {
          max-width: inherit;
          display: flex;
          gap: 1rem;
          align-items: center;
        }

        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      [slot=ui-button-detail__left] {
        display: flex;
        align-items: center;
      }
    }
  }
}

.ui-section {
  grid-area: content;
  @extend %ui-section;

  &__head {
    display: block;
    grid-area: head;
    margin-bottom: 1px;
  }

  &__foot {
    display: block;
    grid-area: foot;
    margin-top: 1px;
  }

  &__content {
    display: block;
    grid-area: content;
    position: relative;
    overflow: auto;
  }

  &--centered {
    grid-template-areas: "content";
    grid-template-columns: auto;
    grid-template-rows: auto;
    place-content: center;
  }
}

.toast-message {
  word-break: normal;
}

.toast {
  top: initial;
}

@media only screen and (min-width: 993px) {
  #toast-container.toast-bottom-right {
    top: initial;
    right: 12px;
    bottom: 40px;
  }
}