@import "settings.colors";
@import "settings.vars";

@import "mixins/tools.mixins";
@import "mixins/settings.fonts";

///////////////////////////////////////////////////
// modal container
///////////////////////////////////////////////////
.o-modal-container {
  @include display-grid;
  margin: 0 auto;
  width: ux-round(rem(620), 0, floor); // avoid sub-pixel rounding issues while `transform: translate` modal
  position: relative;
  border: 1px solid $color-grey-300;
  background-color: $color-white;
}

.o-modal-container--logged-in {
  @include grid-template-columns(0, 1fr);
  @include grid-template-rows(0, rem(44) 1fr);
  height: ux-round(rem(320), 0, floor); // avoid sub-pixel rounding issues while `transform: translate` modal

  .o-modal-row--close {
    @include grid-row(1, 2);
  }
  .o-modal-row--main {
    @include grid-row(2, 3);
  }
}

.o-modal-container--anonymous {
  @include grid-template-columns(0, 1fr);
  @include grid-template-rows(0, rem(44) 4fr 3fr);
  height: ux-round(rem(365), 0, floor); // avoid sub-pixel rounding issues while `transform: translate` modal

  .o-modal-row--close {
    @include grid-row(1, 2);
  }
  .o-modal-row--main {
    @include grid-row(2, 3);
  }
  .o-modal-row--footer {
    @include grid-row(3, 4);
  }
}

.o-modal-row {
  text-align: center;

  .c-button--financial-close {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.o-modal-row--grey {
  background-color: $color-grey-50;
}

.o-modal-row--blue {
  background-color: $color-light-blue-700;
}

.o-modal-row--close {
  height: 100%;
  @include grid-column(1, 2);
}

.o-modal-row--main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: $color-white;
  @include grid-column(1, 2);
}

.o-modal-row--footer {
  border-top: 1px solid $color-grey-300;
  @include grid-column(1, 2);
}

.c-modal-header {
  @include font-pratt;
  font-size: rem(50);
  width: 100%;
  text-align: center;
  color: #000;
  margin: 0;
  padding: 0;
  align-self: stretch;
}

.c-modal-text {
  @include font-gm-sans;
  text-align: center;
  font-size: rem(15);
  line-height: rem(17);
  letter-spacing: rem(0.5);
  padding: rem(20) rem(40);
  margin: 0;
  align-self: stretch;
}


///////////////////////////////
// financial modal breakpoints
///////////////////////////////
@include mobile-only {
  .o-modal-outer-container {
    width: 100%;
    height: 100%;
    padding: rem(10);
    background-color: transparent;
  }

  .o-modal-outer-container--watchlist-logged-in,
  .o-modal-outer-container--portfolio-registered,
  .o-modal-outer-container--portfolio-subscribed {
    top: 0;
    height: auto;
    transform: translate(-50%, 0);
  }

  .c-modal-text {
    padding: rem(20);
  }

  .o-modal-container--logged-in {
    width: 100%;
    height: ux-round(rem(350), 0, floor); // avoid sub-pixel rounding issues while `transform: translate` modal
  }

  .o-modal-container--anonymous {
    width: 100%;
    height: ux-round(rem(500), 0, floor); // avoid sub-pixel rounding issues while `transform: translate` modal
  }

  @include mobile-landscape {
    .o-modal-container--anonymous {
      height: 100%;
    }

    .c-modal-text {
      padding: rem(10) rem(20);
    }
  }
}

@include xs-mobile-only {
  .o-modal-container--logged-in,
  .o-modal-container--anonymous {
    width: 100%;
    height: 100%;

    .c-button {
      padding: 0 rem(15);
    }
  }
}
