@use "../variables";

@mixin static {
  transition: none;
  cursor: default;

  &:hover {
    transform: none;
    box-shadow: none;

    & {
      @include variables.roundedNone;
    }
  }

  &:active {
    transform: none;
    box-shadow: none;

    & {
      @include variables.roundedNone;
    }
  }
}

img {
  &:active {
    transform: scale(1.2);
    max-width: 100%;

    & {
      @include variables.roundedNone;
    }
  }

  &[src*="#not-rounded"] {
    & {
      @include variables.roundedNone;
    }

    &:hover {
      & {
        @include variables.roundedNone;
      }
    }
  }

  &[src*="#static"] {
    @include static;
  }

  &[src*="#small"] {
    margin: 0 auto;
    width: 50%;
  }

  &[src*="#medium"] {
    margin: 0 auto;
    width: 75%;
  }

  &[src*="#shadow"] {
    box-shadow: var(--base-shadow);
  }

  &[src*="#mono"] {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  &[src*="#invert"] {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }

  &[src*="#blur"] {
    -webkit-filter: blur(0.25rem);
    filter: blur(0.25rem);

    &:hover {
      -webkit-filter: blur(0.5rem);
      filter: blur(0.5rem);
    }

    &:active {
      -webkit-filter: blur(0);
      filter: blur(0);
    }
  }

  &[src*="#sepia"] {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
  }

  &[src*="#transparency"] {
    opacity: 0.5;

    &:hover {
      box-shadow: none;
    }
  }

  &[src*="screenshot"] {
    border: none;

    & {
      @include variables.roundedNone;
    }

    &:hover {
      box-shadow: none;
      border: 0;
      & {
        @include variables.roundedNone;
      }
    }
  }

  &[src*="#pixel"] {
    image-rendering: pixelated;
  }

  &[src*="#full"] {
    margin-right: calc((-100vw + 100%) / 2);
    margin-bottom: 1rem;
    margin-left: calc((-100vw + 100%) / 2);
    width: 100vw;
    max-width: 100vw;
    & {
      @include variables.roundedNone;
    }

    & {
      @include static;
    }
  }

  @mixin startEnd($where) {
    float: $where;
    transform-origin: $where;
    margin-inline-end: 1rem;
  }

  &[src*="#start"] {
    @include startEnd(start);
  }

  &[src*="#end"] {
    @include startEnd(end);
  }
}

a img {
  @include variables.borderBasic(1px);

  &:hover {
    cursor: pointer;
    @include variables.borderBasic(2px);
  }

  &[src*="#no-border"] {
    border: 0;
  }
}
