@import '../../styles/shared/index';

.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(color(gray, 90), 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100000;

  &:before, &:after {
    flex: 1;
    content: '';
  }
}

.modal {
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 1px rgba(0, 0, 0, 0.2);
  color: #000;
  width: 800px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;

  > header {
    padding: 1em 1.5em;
    background-color: color(gray, 20);
    border-bottom: 1px solid color(gray, 30);
    position: relative;

    h2 {
      color: #000;
      font-size: 1.5em;
      margin: 0;
      padding: 0;
    }

    .closeButton {
      position: absolute;
      right: 1.4em;
      top: 1.4em;
      cursor: pointer;
    }

    path {
      stroke: #000;
      fill: none;
      stroke-width: 2px;
    }
  }
}

.content {
  padding: 1.5em;
}