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

#start-ui {
  .left-list-container;

  .top-people {
    & > div {
      padding: 0 16px;
    }
  }

  .top-people {
    & > div {
      display: flex;
    }
  }
}

.start-ui-header {
  padding: 8px;
  &.start-ui-header-integrations {
    padding-bottom: 0;
    margin-bottom: -1px;
  }
}

.start-ui-header-icons {
  position: absolute;
  top: 6px;
  right: 0;
}

.start-ui-header-icon {
  position: absolute;
  right: 0;
}

.start-ui-list-wrapper {
  display: flex;
  overflow: hidden;
  flex: 1 1;
  flex-direction: column;

  &.split-view {
    flex: unset;
  }
}

.start-ui-list {
  position: relative;
  flex: 1 1;
  overflow-x: hidden;
  overflow-y: scroll;

  .split-view & {
    overflow: hidden;
    flex: unset;
  }
}

.start-ui-list-spinner {
  .full-screen;
  .flex-center;

  .icon-spinner {
    font-size: var(--font-size-xxl);
  }
}

.start-ui-list-tabs {
  .list-unstyled;

  display: flex;
  height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid var(--gray-50);
  margin: 20px -8px 0;

  .start-ui-list-tab {
    .flex-center;
    .button-reset-default;

    flex-grow: 1;
    border-bottom: 1px solid transparent;
    margin: 0 10px -1px;
    transition: background-color 0.15s ease-in-out;

    &:hover {
      border-bottom: 1px solid var(--gray-50);
      background-color: @white;
    }

    &.active {
      border-bottom-color: var(--black);
      pointer-events: none;

      .start-ui-list-tab-button {
        cursor: default;
        opacity: 1;
        pointer-events: none;
      }
    }

    .start-ui-list-tab-button {
      .button-reset-default;
      .heading-h3;

      width: 100%;
      height: 100%;

      color: var(--main-color);
      cursor: pointer;
      line-height: var(--line-height-md);
    }
  }
}

body.theme-dark {
  .start-ui-import {
    .button-reset-default;
    background-color: var(--accent-color-600);
    color: var(--black);
  }
  .start-ui-list-tabs {
    border-bottom-color: var(--gray-70);

    .start-ui-list-tab {
      &:hover {
        border-bottom: 1px solid var(--gray-70);
        background: @black;
      }

      &.active {
        border-bottom-color: var(--white);
      }
    }
  }
}

.panel-manage-services,
.start-ui-list,
.start-ui-manage-services {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-regular);

  .left-list-item {
    height: 56px;
    min-height: 56px;
    line-height: 3.5rem;
  }

  .left-column {
    width: 60px;
  }

  .column-center,
  .center-column {
    margin-right: 16px;
  }
}

.start-ui-list-top-people {
  overflow: hidden;

  .search-list-item {
    margin-right: 20px;

    &:nth-of-type(3n) {
      margin-right: 0;
    }
    &:nth-last-child(-n + 3) {
      margin-bottom: 0;
    }
  }
}

.start-ui-no-contacts,
.start-ui-no-search-results {
  .text-light;
  margin: 72px 20px 16px;
  line-height: var(--line-height-lg);
  text-align: center;
  white-space: pre-wrap;

  &__content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.16;
  }

  &__icon svg {
    width: 100px;
    height: 100px;
  }

  &__text {
    padding: 8px 40px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-align: center;
  }
}

.start-ui-list-header {
  .heading-h4;
  padding-bottom: 4px;
  padding-left: 16px;
  border-bottom: 1px solid var(--gray-60);
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--gray-70);
  line-height: var(--line-height-lg);
}

body.theme-dark .start-ui-list-header {
  border-bottom-color: var(--gray-70);
  color: var(--gray-50);
}

.start-ui-list-header-top-people {
  margin-bottom: 10px;
}

.start-ui-list-header-connections {
  margin-bottom: 0;
}

.start-ui-import {
  .button-reset-default;
  display: flex;
  height: var(--conversation-input-min-height);
  flex: 0 0 auto;
  align-items: center;
  background-color: var(--accent-color);
  color: var(--white);
  cursor: pointer;
  line-height: var(--line-height-lg);
}

.start-ui-import-icon {
  margin: 0 16px;
}

.start-ui-import-headline {
  margin-top: 24px;
  margin-bottom: 24px;
  font-size: var(--font-size-xlarge);
  font-weight: normal;
}

.start-ui-import-buttons {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}

.start-ui-import-buttons-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 3px;
  border: 1px solid rgba(141, 152, 159, 0.16);
  border-radius: 4px;
  margin-right: 16px;
  background-color: #fff;
  color: var(--background);
}

.start-ui-import-detail {
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: var(--font-size-xsmall);
  line-height: var(--line-height-sm);
}
.search__no-services {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &__icon {
    fill: var(--background);
    opacity: 0.24;
    svg {
      width: 48px;
      height: 48px;
    }
  }

  &__info {
    max-width: 200px;
    margin-top: 16px;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-align: center;
  }
}

.start-ui-fed-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 72px;

  &__icon {
    opacity: 0.24;

    svg {
      width: 48px;
      height: 48px;
    }
  }

  &__text {
    margin: 24px 20px 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    text-align: center;
    white-space: pre-wrap;
  }

  &__button {
    display: flex;
    justify-content: center;
    margin: 16px;
    text-align: center;

    button {
      display: inline-block;
      padding: 4px 16px;
      border: none;
      border-radius: 4px;
      background-color: rgba(186, 200, 209, 0.24);
      font-size: var(--font-size-medium);
      font-weight: var(--font-weight-bold);

      & + button {
        margin-left: 16px;
      }
    }
  }
}

.start-ui-fed-domain-unavailable {
  margin: 24px 52px 16px 16px;

  &__head {
    margin-bottom: 16px;
    font-size: var(--font-size-xsmall);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
  }

  &__text,
  &__link {
    color: #9fa1a2;
    font-size: var(--font-size-small);
  }

  &__link {
    color: var(--accent-color);
  }
}