@import 'mixins';
@import 'fonts';

.dialog-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.dialog-wrapper {
  position: fixed;
  z-index: 102;

  .dialog-sheet {
    @include shadow-strong;
    @include sheet;
    position: fixed;
    width: calc(100% - 32px);
    max-width: 420px;
    top: 52px + 16px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(100% - 52px - 16px * 2);
    display: flex;
    flex-direction: column;
  }

  .dialog-header {
    padding: 24px;
    padding-bottom: 16px;
    vertical-align: top;
    flex-shrink: 0;
    border-bottom: $border;

    .dialog-title {
      font-weight: bold;
      font-size: 21px;
      line-height: 24px;
      color: black;
      font-family: $thin;
    }

    .dialog-close {
      display: block;
      float: right;
      cursor: pointer;
      vertical-align: top;

      path {
        fill: $grey;
      }
    }
  }

  .dialog-body {
    flex: 1;
    overflow-y: auto;
    border-bottom: $border;

    .list-rankings {
      margin-bottom: 0;
    }
  }

  .dialog-footer {
    padding: 12px 24px;
  }
}

