AugurProject/augur-ui

@import (reference) "~assets/styles/shared";

.ModalView {
  background-color: @color-modal-veil;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: @mask-modal;
}

.ModalView__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;

  & > section {
    align-items: center;
    color: @color-white;
    display: flex;
    flex-direction: column;
  }
}

.ModalContainer {
  background-color: @color-white;
  border-radius: 0.32rem;
  color: @color-almostblack;
  max-width: 35rem;
  padding: 1.5rem 0;
  position: relative;
  text-align: center;
  width: 100%;

  > * {
    width: 100%;
  }

  form.ModalTightForm > h1,
  h1 {
    color: @color-almostblack;
    font-size: @font-size-somewhat-large;
    font-weight: 500;
    line-height: 1.75rem;
    margin: 0.5rem 0 1.5rem;
    text-align: center;
  }

  form.ModalTightForm > label {
    color: @color-almostblack;
    font-size: @font-size-medium;
    font-weight: 600;
    line-height: @font-size-large;
    margin: 0 7rem 0.5rem;
    text-align: left;
    width: auto;
  }

  form.ModalTightForm > p,
  > p {
    color: @color-almostblack;
    font-size: @font-size-small;
    line-height: @font-size-large;
    margin: 0;
    padding: 0 4rem;

    &:last-of-type {
      margin-bottom: 1.5rem;
    }

    > button {
      text-decoration: underline;
    }
  }

  form.ModalTightForm > p.Error,
  > p.Error {
    color: @color-red;
  }

  form.ModalTightForm > p.Error {
    margin: 0 7rem 1.5rem;
    padding: 0;
  }

  form.ModalTightForm > div {
    font-size: @font-size-medium;
    line-height: @font-size-normal;
    margin: 0 7rem 1.5rem;
    width: auto;

    > input {
      font-size: @font-size-medium;
      line-height: @font-size-normal;
      padding: @font-size-small @font-size-normal;
    }

    > input::placeholder {
      color: @color-input-border-no-focus;
    }
  }

  form.ModalTightForm > div.ErrorField {
    margin-bottom: 0.5rem;
  }

  form.ModalTightForm > div:last-of-type {
    margin: 0.5rem 0 0;
  }
}

.ModalForm {
  background-color: @color-white;
  color: @color-almostblack;
  max-width: 35rem;
  text-align: left;
  width: 100%;

  > * {
    color: @color-almostblack;
    width: 100%;
  }

  h1 {
    color: @color-almostblack;
    font-size: @font-size-somewhat-large;
    font-weight: 500;
    line-height: 1.75rem;
    margin: 0.5rem 0 1.5rem;
    text-align: center;
  }

  p.Error {
    margin: 0 4rem 1.5rem;
  }

  label {
    color: @color-almostblack;
    font-size: @font-size-medium;
    font-weight: 600;
    line-height: @font-size-large;
    margin: 0 4rem 0.5rem;
    text-align: left;
    text-transform: capitalize;
    width: auto;
  }

  div {
    font-size: @font-size-medium;
    line-height: @font-size-normal;
    margin: 0 4rem 1.5rem;
    width: auto;

    > input {
      font-size: @font-size-medium;
      line-height: @font-size-normal;
      padding: @font-size-small @font-size-normal;
    }

    > input::placeholder {
      color: @color-input-border-no-focus;
    }
  }

  div:last-of-type {
    margin: 0.5rem 0 0;
  }
}

.TightModalContainer {
  background-color: @color-white;
  border-radius: 0.32rem;
  color: @color-almostblack;
  max-width: 20rem;
  padding: 1.5rem 0;
  position: relative;
  text-align: center;
  width: 100%;

  > * {
    width: 100%;
  }

  h1 {
    color: @color-almostblack;
    font-size: @font-size-somewhat-large;
    font-weight: 500;
    line-height: 1.75rem;
    margin: 0.5rem 0 1.5rem;
    text-align: center;
  }

  h2 {
    color: @color-almostblack;
    font-size: @font-size-normal;
    font-weight: 500;
    line-height: @font-size-large;
    margin: 1.5rem 0 0;
    padding: 0 1.5rem;
    text-align: left;
  }

  h3 {
    color: @color-almostblack;
    font-size: @font-size-small;
    font-weight: 400;
    line-height: @font-size-large;
    margin: 0 0 1rem;
    padding: 0 1.5rem;
    text-align: left;
  }

  > div {
    width: 17rem;
  }

  div.ActionButtons {
    width: 100%;
  }
}

.Error {
  color: @color-red;
  display: flex;
  padding: 0;

  > svg {
    height: 1rem;
    line-height: 1rem;
    margin-right: 0.3rem;
    width: 1rem;
  }
}

div.ErrorField,
div.ErrorField:focus-within,
div.ErrorField:focus {
  .border(true, @border-all, @color-red, @border-width-2);

  margin-bottom: 0.5rem;
}

.Warning {
  color: @color-almostblack;
  font-size: @font-size-medium;
  line-height: @font-size-normal;
  margin: 0 0 1.5rem;
  padding: 0 1.5rem;

  > svg {
    height: 1rem;
    line-height: 1rem;
    width: 1rem;
  }
}

.Loading {
  display: flex;
  flex-flow: row nowrap;
  margin: 0.5rem 0;
  max-width: 35rem;
  padding: 0;

  > div {
    display: flex;
    margin: auto;
  }
}

.Receipt {
  background-color: @color-offwhite;
  color: @color-almostblack;
  list-style: none;
  margin: 0 2rem 1.5rem;
  padding: 1rem 0;

  > li {
    align-items: baseline;
    display: flex;
    flex-flow: row nowrap;
    font-size: @font-size-medium;
    line-height: @font-size-normal;
    padding: 0.5rem 0;

    > label {
      color: @color-almostblack;
      flex: 1;
      font-weight: 600;
      margin: 0 1rem 0 auto;
      text-align: right;
    }

    > span:first-of-type {
      color: @color-almostblack;
      flex: 3;
      margin: 0 auto 0 0;
      text-align: left;

      > span {
        font-size: @font-size-extra-small;
        margin-left: 0.25rem;
      }
    }
  }
}

.Description {
  color: @color-almostblack;
  font-size: @font-size-small;
  line-height: @font-size-large;
  margin: 0 0 1.5rem;
  padding: 0 4rem;
}

.ModalTable {
  border-left: 1px solid @color-lightergray;
  border-top: 1px solid @color-lightergray;
  color: @color-almostblack;
  display: flex;
  flex-flow: column;
  margin: 0 0 1.5rem;
}

.ModalTableRow {
  border-bottom: 1px solid @color-lightergray;
  display: flex;
  flex: 1;
  flex-flow: row;

  &:hover {
    background-color: @color-lightpurple;
    color: @color-white;
  }
}

.ModalTableRow__header {
  background-color: @color-offwhite;
  font-size: @font-size-medium;
  line-height: @font-size-normal;

  &:hover {
    background-color: @color-offwhite;
    color: @color-almostblack;
  }
}

.ModalTableColumn {
  border-right: 1px solid @color-lightergray;
  flex: 1;
  font-size: @font-size-small;
  line-height: @font-size-medium;
  padding: 0.25rem 0 0.25rem 1rem;
  text-align: left;
}

.ActionButtons {
  border-top: 1px solid #d8d8d8;
  display: flex;
  flex-flow: row nowrap;
  margin-top: 0.5rem;
  max-width: 35rem;
  padding: 1.5rem 0 0;

  > button {
    line-height: 0;
    min-width: 7rem;
  }
}

.ActionButtons__button {
  margin-right: 1rem;

  &:first-of-type {
    margin-left: auto;
  }

  &:only-of-type {
    margin: auto;
  }

  &:last-of-type {
    margin-right: auto;
  }

  &.disabled {
    pointer-events: none;
  }
}

.ActionButtons__button-gray {
  &:extend(.button--gray all);

  &.disabled {
    &:extend(.button--grey-disabled);
  }
}

.ActionButtons__button-offWhite {
  &:extend(.button--offWhite all);

  &.disabled {
    &:extend(.button--offWhite--disabled);
  }
}

.ActionButtons__button-purple {
  &:extend(.button--purple all);

  &.disabled {
    &:extend(.button--purple--disabled);
  }
}

.ModalDisclaimer {
  background-color: @color-white;
  border-radius: 0.32rem;
  color: @color-almostblack;
  flex-flow: row nowrap;
  max-width: 35rem;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  padding: 1.5rem 0;
  position: relative;
  text-align: center;
  width: 100%;

  > * {
    width: 100%;
  }

  h1 {
    color: @color-almostblack;
    font-size: @font-size-somewhat-large;
    font-weight: 500;
    line-height: 1.75rem;
    margin: 0.5rem 0 1.5rem;
  }
}

.ModalDisclaimer__TextBox {
  background-color: @color-offwhite;
  margin: 0 2rem 1.5rem;
  max-height: 25rem;
  max-width: 35rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 2rem;
  text-align: left;
  width: auto;

  > p {
    color: @color-almostblack;
    font-size: @font-size-medium;
    line-height: @font-size-somewhat-large;
    margin: 0 0 1.5rem;
  }
}

.ModalDisclaimer__helperText {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 1rem;

  > label {
    align-items: center;
    color: @color-almostblack;
    display: flex;
    font-size: @font-size-medium;
    font-weight: normal;
    line-height: @font-size-normal;
    margin: 0 5rem 0 4rem;
    text-align: left;
    text-transform: none;
    width: 100%;
  }
}

.ModalDisclaimer__checkbox {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 1rem;

  > label {
    align-items: center;
    color: @color-almostblack;
    display: flex;
    font-size: @font-size-medium;
    font-weight: bold;
    line-height: @font-size-normal;
    margin: 0 4rem;
    text-transform: none;
    width: 100%;

    > div {
      margin-right: 2rem;
    }
  }
}

.ModalDisclaimer__ActionButtons {
  border-top: 1px solid #d8d8d8;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  max-width: 35rem;
  padding: 0 2rem;

  > label {
    align-items: flex-end;
    color: @color-almostblack;
    display: flex;
    margin: 1.5rem 0;

    > input {
      height: 1rem;
      margin-left: 1rem;
      width: 1rem;
    }
  }

  > button {
    &:extend(.button--purple all);

    margin: 0 auto;

    &.disabled {
      &:extend(.button--purple--disabled);

      pointer-events: none;
    }
  }
}

.ModalMarketReview,
.ModalMarketsV2Alert {
  background-color: @color-white;
  border-radius: 0.32rem;
  color: @color-almostblack;
  flex-flow: row nowrap;
  max-width: 35rem;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  padding: 1.5rem 0;
  position: relative;
  text-align: center;
  width: 100%;

  h1 {
    color: @color-almostblack;
    font-size: 1.375rem;
    font-weight: bold;
    margin: 0 0 0.25rem;
    text-align: center;
  }
}

.ModalMarketReview__Header {
  color: @color-almostblack;
  font-size: 0.875rem;
  font-weight: normal;
  padding: 0 2rem 1rem;
  text-align: left;

  > p:first-of-type {
    > span {
      font-weight: bold;
    }
  }
}

.ModalMarketReview__ReadMore {
  color: @color-almostblack;
  cursor: pointer;
  font-weight: bold;
}

.ModalMarketReview__TextBox,
.ModalMarketsV2Alert__Markets {
  background-color: @color-offwhite;
  color: @color-almostblack;
  margin: 0 2rem 1.5rem;
  overflow-wrap: break-word;
  padding: 1.5rem 2rem;
  text-align: left;
  width: 89%;

  > div {
    > p {
      font-size: 0.875rem;
      font-weight: bold;
      margin: 0 0 0.25rem;
      text-transform: uppercase;
    }

    font-size: 0.875rem;
    font-weight: normal;
    margin: 0 0 1rem;
  }
}

.ModalMarketReview__checkbox {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 1.5rem;
  width: 100%;

  > label {
    align-items: center;
    color: @color-darkpurple;
    display: flex;
    font-size: 0.875rem;
    font-weight: bold;
    margin: 0 2rem;
    text-transform: none;
    user-select: none;

    > div {
      margin-right: 2rem;
    }
  }

  &:active,
  &:focus {
    outline: none;
  }
}

.ModalMarketReview__ActionButtons {
  border-top: 1px solid #d8d8d8;
  display: flex;
  justify-content: center;
  padding: 1.5rem 2rem 0;
  width: 100%;

  > div:first-of-type {
    margin-right: 1rem;
  }

  > div:last-of-type button {
    padding: 1rem;
  }

  > div {
    border: 0;
    margin: 0;
    padding: 0;
  }
}

.ModalMarketsV2Alert {
  margin: 3rem 0;
  padding: 2.125rem 0 1.5rem;

  > h1 {
    color: @color-cuttoff-red;
    margin: 0;
  }

  @media @breakpoint-mobile {
    margin: 0;
  }
}

.ModalMarketsV2Alert__Header,
.ModalMarketsV2Alert__Warning {
  color: @color-almostblack;
  font-size: 0.875rem;
  font-weight: normal;
  padding: 0 2rem 1rem;
  text-align: left;

  a {
    text-decoration: underline;
  }

  > p {
    line-height: 18px;
    margin: 1rem 0;
  }

  > p:last-of-type {
    font-weight: bold;
    margin: 1rem 0 0;
  }
}

.ModalMarketsV2Alert__Warning {
  color: @color-cuttoff-red;
  padding: 0 2rem 1rem;

  > p {
    margin: 0;
  }
}

.ModalMarketsV2Alert__Markets {
  background-color: @color-offwhite;
  color: @color-almostblack;
  margin: 0 2rem;
  overflow: auto;
  overflow-wrap: break-word;
  padding: 1.5rem;
  text-align: left;
  text-decoration-line: underline;
  width: 89%;

  > div {
    font-size: 0.875rem;
    font-weight: normal;
    margin: 0 0 1rem;
  }

  > div:last-of-type {
    margin: 0;
  }
}

.ModalConfirm {
  > p {
    font-size: @font-size-medium;
    margin-bottom: 1.25rem;
    padding: 0 2rem;
    text-align: left;
  }

  > p:last-of-type {
    margin-bottom: 2.25rem;
  }
}

@media @breakpoint-mobile-small {
  .ModalView__content {
    padding: 1rem;
  }

  .ModalView__content--taller {
    justify-content: flex-start;
  }

  .ModalContainer > p,
  form.ModalTightForm > p {
    padding: 0 1.5rem;
  }

  .ModalForm {
    div,
    p,
    p.Error {
      margin: 0 1.5rem 1.5rem;
    }

    p.Error {
      padding: 0;
    }

    div.ErrorField {
      margin: 0 1.5rem 0.5rem;
    }

    div:last-of-type {
      margin: 0.5rem 0 0;
    }

    label {
      margin: 0 1.5rem 0.5rem;
    }
  }

  .ActionButtons {
    > button {
      min-width: 7rem;
    }
  }

  .ModalDisclaimer__TextBox {
    margin: 0 1rem 1rem;
    max-height: 20rem;
    padding: 0.5rem 1rem;
  }

  .ModalDisclaimer__helperText,
  .ModalDisclaimer__checkbox {
    > label {
      font-size: @font-size-small;
      line-height: @font-size-small;
      margin: 0 1.5rem;
    }
  }

  .ModalDisclaimer {
    > h1 {
      margin: 0 0 1rem;
    }
  }
}

@media @breakpoint-mobile-extra-small {
  .ModalDisclaimer__TextBox {
    margin: 0 1rem 1rem;
    max-height: 10rem;
  }

  .ModalDisclaimer {
    padding: 1rem 0;

    > h1 {
      margin: 0 0 1rem;
    }

    .ModalDisclaimer__helperText,
    .ModalDisclaimer__checkbox {
      > label {
        margin: 0 1rem;
      }
    }

    .ActionButtons {
      padding: 1rem 0 0;
    }
  }
}

@media @breakpoint-mobile-smaller-height,
  @breakpoint-mobile-extra-small-height {
  .ModalDisclaimer {
    max-height: 75vh;
    max-width: 90vw;
    padding: 0.5rem 0;

    > h1 {
      margin: 0 0 0.5rem;
    }

    .ActionButtons {
      margin: 0;
      max-width: 90vw;
      padding: 0.5rem 0 0;
    }
  }

  .ModalDisclaimer__TextBox {
    margin: 0 0.5rem 0.5rem;
    max-height: 6rem;
    max-width: none;
    padding: 0 0.5rem;
  }

  .ModalDisclaimer__helperText,
  .ModalDisclaimer__checkbox {
    margin-bottom: 0.5rem;

    > label {
      font-size: @font-size-small;
      line-height: @font-size-small;
      margin: 0 1rem;
    }
  }
}