/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
* //disable require_tree .
*= require_self
*/

/*
TODO: do we still need this here? -> @import 'iv_viewer';
*/

.archives {
  .placeholder-bg {
    background-image: asset-url("/assets/placeholder-eb250514.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    width: 100% !important;
    background-color: #f0f0f0;
  }

  .placeholder-bg.ratio-500-264 {
    aspect-ratio: 500/264;
  }

  .placeholder-bg.ratio-2048-1080 {
    aspect-ratio: 2048/1080;
  }
}

.placeholder-bg {
  background-image: asset-url("/assets/placeholder-eb250514.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f0f0f0;
}

.placeholder-bg, .ratio-500-264 {
  width: 500px !important;
  aspect-ratio: 500/264 auto;
}

.placeholder-bg, .ratio-2048-1080 {
  width: 2048px !important;
  aspect-ratio: 2048/1080 auto;
}

/* Adapted from https://css-tip.com/corner-only-border-image */
.detection_overlay {
  position: absolute;

  --s: 50px; /* the size on the corner */
  --t: 5px;  /* the thickness of the border */
  --g: 5px; /* the gap between the border and image */

  padding: calc(var(--g) + var(--t));
  outline: var(--t) solid #f68911; /* the color here */
  outline-offset: calc(-1*var(--t));
  mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
  /* transition: .4s; */
}

#belowFoldNotifier {
  position: fixed;
  bottom: 50px;
  right: 50px;
  cursor: pointer;
}

th.rotate {
  /* Something you can count on */
  height: 100px;
  white-space: nowrap;
}

th.rotate > div {
  transform:
    rotate(270deg);

}

button {
  .show-when-enabled { display: initial; }
  .show-when-disabled { display: none; }
  .show-when-hover { display: none; }

  &[disabled] {
    .show-when-enabled { display: none; }
    .show-when-disabled { display: initial; }
    .show-when-hover { display: none; }
  }
}

button.with-hover:hover {
  .show-when-enabled { display: none; }
  .show-when-disabled { display: none; }
  .show-when-hover { display: initial; }

  &[disabled] {
    .show-when-enabled { display: none; }
    .show-when-disabled { display: initial; }
    .show-when-hover { display: none; }
  }
}