@use "system/colors";
@use "system/typography";
@use "system/spacing";

.ods-image {
  display: block;
  line-height: 0;
  object-fit: cover;
  width: 100%;

  img {
    object-fit: cover;
    width: 100%;
  }

  &--circle {
    border-radius: 50%;
  }

  &--shape {
    position: relative;

    &::before {
      background-color: colors.$white;
      content: "";
      display: block;
      height: 50%;
      left: 0;
      position: absolute;
      top: 0;
      width: 50%;
    }

    &::after {
      background-color: colors.$yellow;
      border-radius: 50%;
      content: "";
      display: block;
      height: 50%;
      left: 0;
      position: absolute;
      top: 0;
      width: 50%;
    }

    &-top-right {
      &::before,
      &::after {
        left: auto;
        right: 0;
      }
    }

    &-bottom-left {
      &::before,
      &::after {
        bottom: 0;
        top: auto;
      }
    }

    &-bottom-right {
      &::before,
      &::after {
        inset: auto 0 0 auto;
      }
    }

    &-red {
      &::after {
        background-color: colors.$red;
      }
    }

    &-green-light {
      &::after {
        background-color: colors.$green-light;
      }
    }

    &-blue-light {
      &::after {
        background-color: colors.$blue-light;
      }
    }
  }

  &__caption {
    @extend %ods-text--size-lima, %ods-text--size-kilo-breakpoint-medium;
    @extend %ods-text--weight-light;
    @extend %ods-margin-top-4;
  }
}