@use 'fixed_widescreen';
@use 'button_effects';

/******************
 *    Header
 ******************** */

// .phone-statusbar-mask {
//   @extend %full-fixed-width;
//   position: fixed;

//   background: var(--primary-color-depth3);
//   height: 200px;
//   top: -200px;
//   z-index: 999;

// }

.header {
  @extend %full-fixed-width;
  position: fixed;

  /* background-image:linear-gradient(90deg, #4075d5, #48A3DD); */
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  height: 45px;
  top: 0px;
  overflow: auto;
  z-index: 999;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  text-align: center;
  user-select: none;
  padding-right: 1px;
  padding-top: env(safe-area-inset-top);

  &.shadow {
    box-shadow: 0 20px 29px -13px rgba(0, 0, 0, 0.41);
  }
}

.header-holder {
  height: 45px;
}

.header {
  .headerButton {
    @extend %transparent-button;
    cursor: pointer;
    width: 35px;
    color: #fff;
    text-align: center;
    font-size: 1.7em;
    outline: none;
    border-radius: 5px;
    margin: auto;
    transition: all 0.2s ease-out;
    position: relative;
  }

  .macOSReturnButton {
    margin: auto auto auto 70px !important;
  }

  .text {
    font-size: 20px;
    color: white;
    margin: auto;
    position: relative;

    .processing {
      position: absolute;
      left: -28px;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease-in-out;
      opacity: 0;

      &.processing-open {
        opacity: 1;
      }
    }
  }
}

.macOSHeader {
  height: 35px;
}

.dot {
  top: (-4px) !important;
  right: (-4px) !important;
}

.header-alert {
  background-color: #fbe876;
  width: 100%;
  color: red;
  z-index: 1000;
  position: fixed;

  .words {
    text-align: center;
    margin: 0;
    font-size: 12px;
  }

  &.in-widescreen {
    width: 35%;
    max-width: 550px;
  }
}
