// This file is part of Indico.
// Copyright (C) 2002 - 2026 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'rb:styles/responsive' as *;

.dimmable-image {
  position: relative;

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .hover-content {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 160px;
  }
  @media (max-width: $tablet-width) {
    .hover-content {
      opacity: 1;
    }

    :global(.img) {
      filter: brightness(80%);
    }
  }

  @media (min-width: $tablet-width) {
    &:hover :global(.img) {
      filter: blur(2px) contrast(150%) brightness(40%);
      transition: all 30ms ease;
    }

    &:hover .hover-content {
      opacity: 1;
    }

    &:hover .content {
      opacity: 0;
    }
  }
}
