/*
 * 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/.
 *
 */

.preferences-devices-model {
  display: flex;
  align-items: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);

  .conversation-badges {
    margin-left: 4px;
  }
}

.preferences-devices-model-name {
  display: flex;
  align-items: center;

  font-size: var(--font-size-large);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-lg);

  .conversation-badges {
    margin-left: 4px;
  }
}

.preferences-devices-activated {
  margin: 16px 0;
  color: var(--gray-90);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
}

.preferences-devices-card {
  display: flex;
  width: 100%;
  max-width: var(--preferences-width);
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--separator-color);
  cursor: pointer;
  padding-block: 4px 8px;

  .focus-default;

  .preferences-devices-card-action {
    display: flex;
    width: 56px;
    align-items: center;
    justify-content: space-between;
    fill: var(--background);

    &__delete {
      .button-reset-default;
      padding: 8px;
      .focus-default;
    }

    &__forward {
      margin-left: auto;
      .button-reset-default;
      .focus-default;
    }
  }
}

.preferences-devices-card-info {
  max-width: 372px;
}

.preferences-devices-details {
  .label-bold-xs;

  display: flex;
  margin: 0 0 16px -34px;
  line-height: var(--line-height-sm);
}

.preferences-devices-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 35px;
  height: 35px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.preferences-devices-id {
  display: grid;
  font-size: var(--font-size-small);
  grid-template-columns: auto 1fr;
  line-height: var(--line-height-sm);
  text-transform: uppercase;

  .preferences-formatted-id {
    overflow: hidden;

    margin-left: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.preferences-devices-activated-bold {
  font-weight: var(--font-weight-bold);
}

.preferences-devices-fingerprint {
  max-width: 300px;
  line-height: var(--line-height-lg);
}

.preferences-devices-verification-details {
  display: flex;
  align-items: center;

  .conversation-badges {
    margin-left: 4px;
  }
}

.preferences-devices-fingerprint-label {
  margin-top: 12px;
}

.preferences-devices-session {
  height: 36px;
}

.preferences-devices-session-confirmation,
.preferences-devices-session-reset {
  height: 16px;
  padding-top: 16px;
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-sm);
}

.preferences-devices-session-reset {
  color: var(--foreground);
}

.preferences-devices-verification {
  margin: 16px 0;
}

.preferences-devices-separator {
  max-width: var(--preferences-width);
  margin-bottom: 32px;
}

body.theme-dark {
  .preferences-devices-activated {
    color: var(--gray-20);
  }
}

.preferences-proteus-details {
  margin-top: 32px;
}