$windowBorderRadius: 10px;
$backgroundColor: #120d9c;
$buttonSize: 60px;
$smallButtonSize: 40px;
$textColor: white;
$buttonMargin: 15px;
$windowWidth: 350px;
$windowHeight: 470px;
$navbarHeight: 60px;
$navbarMargin: 20px;
$marginBetweenFrameAndButton: 10px;
$chatframeHeaderHeight: 60px;

.chatframe {
  position: fixed;
  right: $buttonMargin;
  bottom: $buttonMargin;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  height: $buttonSize;
  width: $buttonSize;
  max-width: calc(100% - (2 * #{$buttonMargin}));
  max-height: calc(100% - (#{$navbarHeight} + #{$buttonMargin} + #{$navbarMargin}));
  pointer-events: none;

  & > * {
    pointer-events: auto;
  }

  @media (max-width: $screen-xxs-max) {
    height: $smallButtonSize;
    width: $smallButtonSize;
  }

  &.open {
    height: $windowHeight;
    width: $windowWidth;
  }

  .chatframe-modal {
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.4);
    margin-bottom: $marginBetweenFrameAndButton;
    border-radius: $windowBorderRadius;
    height: calc(100% - (#{$buttonSize} + #{$marginBetweenFrameAndButton}));
    width: 100%;

    /* Portrait phones and smaller */
    @media (max-width: $screen-xxs-max) {
      height: calc(100% - (#{$smallButtonSize} + #{$marginBetweenFrameAndButton}));
    }

    .chatframe-modal-header {
      font-family: $font-family4;
      height: $chatframeHeaderHeight;
      border-top-left-radius: $windowBorderRadius;
      border-top-right-radius: $windowBorderRadius;
      display: flex;
      align-items: center;
      padding: 0 15px;
      color: $textColor;
      background-color: $backgroundColor;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      position: relative;
      z-index: 400;
    }

    .chatframe-modal-iframe {
      height: calc(100% - #{$chatframeHeaderHeight});
      width: 100%;
      border: 0;
      display: block;
      border-bottom-left-radius: $windowBorderRadius;
      border-bottom-right-radius: $windowBorderRadius;
    }
  }

  .chatframe-button {
    height: $buttonSize;
    width: $buttonSize;
    border-radius: $buttonSize / 2;
    background-color: $backgroundColor;
    color: $textColor;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Portrait phones and smaller */
    @media (max-width: $screen-xxs-max) {
      height: $smallButtonSize;
      width: $smallButtonSize;
      border-radius: $smallButtonSize / 2;
    }
  }

  .chatframe-icon:before {
    font-size: 32px;
  }
}
