@import "variables";

.satellite-overlay-toggle {
  position: fixed;
  top: 0.5em;
  right: 0.5em;
  z-index: $map-overlay;
  border-radius: 6px;
  overflow: hidden;

  @media screen and (max-width: 600px) {
    top: 75px;
  }

  .satellite-overlay-toggle-button {
    cursor: pointer;
    width: 64px;
    height: 64px;
    opacity: 0.85;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 0.5em;
    text-transform: uppercase;

    &.satellite-overlay-toggle-map {
      color: black;
    }

    &:hover {
      opacity: 1;
    }

    .label {
      font-size: $normal;
      font-family: $mainfont;
    }
  }
}
