@import "settings";

$opacityVisible: 0.7;
$states: godi fingerfood foto sekt essen spiel dance;

#info-image-container {
  position: relative;

  @include breakpoint(small down) {
    img:not(.circler) {
      width: 100%;
    }
  }

  img.circler {
    position: absolute;
    height: 12%;
    opacity: 0;

    cursor: pointer;

    //left: 0;
    &.godi {
      top: 1.5%;
      left: 51%;
    }

    &.fingerfood {
      left: 5%;
      top: 12.5%;
      width: 38%;
      height: 20%;
    }

    &.foto {
      left: 55%;
      top: 32%;
      width: 33%;
    }

    &.sekt {
      left: 7%;
      top: 46.5%;
      width: 35%;
    }

    &.essen {
      left: 55%;
      top: 60%;
      width: 32%;
    }

    &.spiel {
      left: 8%;
      top: 72.5%;
      width: 34%;
    }

    &.dance {
      left: 55%;
      top: 86%;
      width: 32%;
    }
  }

  @each $state in $states {
    &[data-state='#{$state}'] .#{$state} {
      opacity: $opacityVisible;
    }
  }
}

.anchor {
  display: block;
  //margin-bottom: 2rem;
  padding-top: 1rem;

  &:first-child {
    padding-top: 0;
  }

  p:last-child {
    margin-bottom: 0;
  }

  &.show-in-dialog {
    position: fixed;
  }
  &:last-child{
    height: calc(100vh - 8rem - 1px);
    @include breakpoint(medium down) {
      height: calc(100vh - 7rem - 1px);
    }
  }
}

#modal {
  display: none;

  &.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background: #0a0a0a40;

    .anchor {
      margin: 10%;
      width: 80%;
      max-height: 80%;
      overflow: auto;
      padding: 2rem 1rem;
      background: $background-color;
      height: initial;
    }
  }
}