@teaser-images-aspect-ratio: var(--teaser-images-aspect-ratio, 16/9);
@teaser-images-object-position: var(--teaser-images-object-position, top left);

.teaser-item {
  display: flex;
  color: rgba(0, 0, 0, 0.87);

  &.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      max-width: 300px;
      height: auto;
      align-self: center;
    }
  }

  p {
    margin-bottom: 0;
    text-align: left;
  }

  &.default .image-wrapper {
    margin-right: 25px;

    img {
      max-width: 100%;
      height: auto;
    }
  }
}

.teaser-item.default {
  .content {
    width: 100%;
  }
}

.teaser-item .image-wrapper img {
  width: 100%;
  aspect-ratio: @teaser-images-aspect-ratio;
  object-fit: cover;
  object-position: @teaser-images-object-position;
}

#page-document > .block.teaser {
  padding: 25px 0;

  &.has--align--left,
  &.has--align--right {
    .teaser-item.default {
      display: flex;

      .image-wrapper {
        align-self: flex-start;
      }

      @media only screen and (max-width: @largestMobileScreen) {
        flex-direction: column !important;

        .image-wrapper {
          margin-right: 0;
          margin-bottom: 25px;
          margin-left: 0;

          img {
            width: 100%;
            max-width: unset;
            height: auto;
          }
        }
      }
    }
  }

  &.has--align--left {
    .teaser-item.default {
      flex-direction: row;

      .image-wrapper {
        margin-right: 20px;
        margin-left: 0;

        @media only screen and (max-width: @largestMobileScreen) {
          margin-right: 0;
          margin-left: 0;
        }
      }
    }
  }

  &.has--align--right {
    a .teaser-item.default {
      flex-direction: row-reverse;

      .image-wrapper {
        margin-right: 0;
        margin-left: 20px;

        @media only screen and (max-width: @largestMobileScreen) {
          margin-right: 0;
          margin-left: 0;
        }
      }
    }
  }

  &.has--align--center {
    .teaser-item.default {
      display: block;

      a {
        display: block;
      }

      .image-wrapper {
        margin-bottom: 25px;
      }
    }
  }
}

.block-editor-teaser.has--align--left .block.teaser,
.block-editor-teaser.has--align--right .block.teaser {
  .teaser-item.default {
    display: flex;

    .image-wrapper {
      align-self: flex-start;
    }
  }
}

.block-editor-teaser.has--align--left .block.teaser {
  .teaser-item.default {
    flex-direction: row;

    .image-wrapper {
      margin-right: 20px;
      margin-left: 0;
    }
  }
}

.block-editor-teaser.has--align--right .block.teaser {
  .teaser-item.default {
    flex-direction: row-reverse;

    .image-wrapper {
      margin-right: 0;
      margin-left: 20px;
    }
  }
}

.block-editor-teaser.has--align--center .block.teaser {
  .teaser-item.default {
    display: block;

    .image-wrapper {
      margin: 0 0 25px 0;
    }
  }
}

#sidebar-properties .ui.form {
  .teaser.block.overwrite.actions {
    display: flex;
    flex-direction: column;

    > div {
      display: flex;
      justify-content: space-between;

      .ui.label {
        padding-left: 0;
        background: unset;
        font-size: 15px;
        text-transform: capitalize;
      }
    }

    h3 {
      text-transform: capitalize;
    }

    .ui.button:hover {
      background: none !important;
    }
  }

  .ui.message.warning:has(.teaser.block.overwrite.actions) {
    display: block;
  }
}

#sidebar-properties .ui.segment.attached.actions {
  display: flex;
  justify-content: center;
  padding: 1.5em 1em;
  border-top: none;

  .ui.buttons.refresh.teaser button {
    display: flex;
    align-items: center;
    padding: 0.5833em 0.833em;
    background-color: #e8e8e8 !important;
    color: rgba(0, 0, 0, 0.6) !important;
    font-size: 0.85714286rem;
    font-weight: bold;

    svg {
      padding: 0 0 0 0.5em;
      margin-right: 0;
    }
  }
}