zapupenec/diary_app

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
  cursor: pointer;
}

.container::before {
  pointer-events: none;
  position: absolute;
  content: '';
  background: lightgrey;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.container::after {
  pointer-events: none;
  display: block;
  height: 60px;
  width: 60px;
  content: '';
  background: no-repeat center / 24px url('assets/icons/check.svg'), var(--button);
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.container.active::after {
  opacity: 1;
}

.container.inactive::before {
  opacity: 0.5;
}

.container.vertical {
  grid-row: 2 span;
}