@use "../../../styles/int.scss";
@use "../theme/maps.scss";

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity ease-in-out 500ms;

  &.active {
    opacity: 1;
  }
};

.text-container {
  position: relative;

}

.text {
  color: maps.$off-white;
  margin: 0;
  text-shadow: 1px 1px 2px maps.$off-black;
  background-color: rgba(maps.$off-black, .8);
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold !important;
  z-index: 2;
  position: relative;

  @include int.sans($role: "component");
}