/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

// modal
.detail-view {
  &.modal::before {
    background-color: var(--app-bg-secondary);
  }

  &.modal-show {
    .flex-center;
  }
}

// wrapper
.detail-view-content {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
}

// layout
.detail-view-header {
  .flex-center;

  height: 72px;
  flex: 0 0 auto;
  line-height: var(--line-height-sm);
}

.detail-view-header-close-button {
  .button-reset-default;
  .circle(40px);
  .flex-center;

  position: absolute;
  right: 24px;
  cursor: pointer;
  fill: currentColor;
}

.detail-view-main {
  .flex-center;
  overflow: hidden;
  width: 100%;

  max-width: 84%;

  flex: 1 1;
  contain: strict;
  cursor: default;
}

// fix flexbox issue in FF
@-moz-document url-prefix() {
  .detail-view-main {
    min-height: 0;
  }
}

.detail-view-footer {
  .flex-center;

  height: 72px;
  flex: 0 0 auto;

  .detail-view-action-button + .detail-view-action-button {
    margin-left: 40px;
  }
}

// TODO generic button
.detail-view-action-button {
  .button-reset-default;
  .label-bold-xs;

  display: flex;
  align-items: center;
  cursor: pointer;

  & > *:first-child {
    margin-right: 12px;
  }
  svg {
    fill: currentColor;
  }
}