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

// default
.button {
  .label-bold-xs;
  display: inline-block;

  width: var(--button-width);
  height: var(--button-height);
  padding: 0 16px;
  border: var(--button-border-size) solid transparent;
  border-radius: var(--button-border-radius);
  background-color: var(--accent-color);
  color: #fff;
  cursor: pointer;
  line-height: calc(var(--button-height) - var(--button-border-size) * 2);
  text-align: center;
  text-decoration: none;
  user-select: none;

  > input {
    position: absolute;
    left: var(--offscreen-left);
  }

  // types
  &.button-inverted {
    border-color: var(--accent-color);
    background-color: transparent;
    color: var(--accent-color);
  }

  &.button-white {
    border-color: #fff;
    background-color: #fff;
    color: #222;

    &:active,
    &:focus {
      border-color: darken(#fff, 16%);
      background-color: darken(#fff, 16%);
      color: darken(#222, 16%);
    }
  }

  &.button-outline {
    border-color: fade(#fff, 32%);
    background-color: transparent;
    font-weight: normal;

    &:active,
    &:focus {
      border-color: darken(fade(#fff, 32%), 16%);
      background-color: var(--background-fade-16);
      color: darken(#fff, 16%);
    }
  }

  &.button-small,
  &.button-medium {
    width: var(--button-medium-width);
    min-width: var(--button-medium-width);
    height: var(--button-medium-sm-height);
    line-height: calc(var(--button-medium-sm-height) - var(--button-border-size) * 2);
  }

  // expansion
  &.button-fluid {
    width: auto;
  }

  &.button-full {
    width: 100%;
  }

  // misc
  &:disabled,
  &.button-disabled {
    cursor: default;
    opacity: 0.32;
    pointer-events: none;
  }

  &.button-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px; // TODO

    span + span {
      margin-left: 8px;
    }
  }
}

// groups
.button-group {
  display: flex;
  width: 100%;

  > .button {
    flex: 1 1;

    &:first-child {
      margin-right: 4%;
    }
  }
}

.file-button > input {
  position: absolute;
  left: -9999px;
}

// 1. icon only
// <div class="icon-add icon-button"></div>
// 2. icon with text
// <div class="icon-add icon-button"><span>add people</span></div>
// 3. new style
// <div class="button-icon">
//  <span class="button-round icon-plus"/> or: <svg/> or <span class="icon-plus"/>
//  <label>add people</label>
// </div>
//
.icon-button,
.button-icon {
  .button-icon-secondary();

  display: inline-flex;
  align-items: center;

  > label,
  > span {
    .label;

    margin-left: 8px;
    color: var(--background);
  }

  > input {
    position: absolute;
    left: -9999px;
  }

  &.disabled,
  &:disabled {
    .translucent;

    cursor: default;
    pointer-events: none;
  }
}

.button-icon-large {
  .button-reset-default;
  .button-icon;

  padding: 8px;
}

// button with label-xs style
// <span class="button-label">ok</span>
.button-label {
  .label-xs;

  border: 0;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
  line-height: var(--line-height-lg);
  outline: 0;

  &.disabled {
    cursor: not-allowed;
  }
}

// Colors and more
.button-color() {
  border: none;
  color: #fff;
  &.disabled {
    background: transparent;
  }
}

.button-theme {
  .button-color;
  background-color: var(--accent-color);
  &.disabled {
    color: var(--accent-color-fade-24);
  }
}

.button-theme-color(@color) {
  .button-color;

  background-color: @color !important;
  &.toggled {
    color: @color !important;
  }
  &.disabled {
    color: fade(@color, 24%) !important;
  }
}

.button-theme-blue {
  .button-theme-color(@w-blue);
}
.button-theme-green {
  .button-theme-color(@w-green);
}
.button-theme-yellow {
  .button-theme-color(@w-yellow);
}
.button-theme-red {
  .button-theme-color(@w-red);
}
.button-theme-orange {
  .button-theme-color(@w-orange);
}
.button-theme-pink {
  .button-theme-color(@w-pink);
}
.button-theme-purple {
  .button-theme-color(@w-purple);
}

.svg-button {
  cursor: pointer;
}

.button-reset-default {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

// -- new design buttons --

.buttons-group {
  display: flex;
  align-items: center;

  &-button {
    .button-small;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--button-tertiary-border);
    background: var(--button-tertiary-bg);
    color: var(--main-color);

    &:focus-visible {
      border: 1px solid var(--accent-color-focus);
      border-radius: 0;
      background-color: var(--button-tertiary-hover-bg);
      outline: none;
    }

    &:hover {
      border: 1px solid var(--button-tertiary-hover-border);
      background-color: var(--button-tertiary-hover-bg);
    }

    &:active {
      border: 1px solid var(--accent-color-focus);
      background: var(--accent-color-highlight);
      color: var(--icon-primary-active-fill);
    }
  }

  &-button-left {
    border-radius: 12px 0 0 12px !important;
  }

  &-button-right {
    border-radius: 0 12px 12px 0 !important;
  }

  &-button-active {
    border: 1px solid var(--accent-color-focus);
    background: var(--accent-color-highlight);
    color: var(--icon-primary-active-fill);
  }
}

.button-text {
  .text-bold;
  display: inline-flex;
  min-width: 125px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

.button-text-primary {
  .button-text;
  background-color: var(--accent-color-500);
  color: var(--white);

  &:hover {
    background-color: var(--accent-color-600);
    cursor: pointer;
  }

  &:focus-visible {
    border-radius: 16px;
    background-color: var(--accent-color-600);
    outline: 1px solid var(--accent-color-700);
  }

  body.theme-dark & {
    color: var(--black);

    &:hover {
      background-color: var(--accent-color-400);
    }

    &:focus-visible {
      background-color: var(--accent-color-400);
      outline: 1px solid var(--accent-color-100);
    }
  }

  &.active {
    background-color: var(--accent-color-700);

    body.theme-dark & {
      border: 1px solid var(--accent-color-600);
      color: var(--white);
    }
  }

  &[disabled]:not([disabled='false']) {
    border: transparent !important;
    background-color: var(--gray-50) !important;
    color: var(--gray-80) !important;
    cursor: not-allowed;
    outline: none !important;

    body.theme-dark & {
      background-color: var(--gray-70) !important;
      color: var(--black) !important;
    }
  }
}

.button-text-secondary {
  .button-text;
  border: 1px solid var(--gray-40);
  background-color: var(--white);
  color: var(--black);

  &:hover {
    border-color: var(--accent-color-400);
  }

  &:focus-visible {
    color: var(--accent-color-500);
    outline: 1px solid var(--accent-color-500);
  }

  body.theme-dark & {
    border: 1px solid var(--gray-80);
    background-color: var(--gray-95);
    color: var(--white);

    &:hover {
      border-color: var(--gray-60);
      background-color: var(--gray-80);
    }

    &:focus-visible {
      background-color: var(--gray-80);
      outline: 1px solid var(--gray-50);
    }
  }

  &.active {
    border: 1px solid var(--accent-color-500);
    background-color: var(--accent-color-50);
    color: var(--accent-color-500);

    body.theme-dark & {
      border: 0;
      background-color: var(--gray-95);
      color: var(--accent-color-500);
    }
  }

  &[disabled]:not([disabled='false']) {
    border: 1px solid var(--gray-40) !important;
    background-color: var(--gray-20) !important;
    color: var(--gray-60) !important;
    cursor: not-allowed;
    outline: none !important;

    body.theme-dark & {
      border: 1px solid var(--gray-95) !important;
      background-color: var(--gray-90) !important;
      color: var(--gray-60) !important;
    }
  }
}

.button-icon-new {
  display: inline-flex;
  min-width: 40px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;

  svg {
    path {
      fill: currentColor;
    }
  }
}

.button-icon-primary() {
  .button-icon-new;
  border: 1px solid var(--gray-40);
  background-color: var(--white);
  color: #33373a;

  &:hover {
    border-color: var(--gray-50);
    background-color: var(--gray-20);
  }

  &:focus-visible {
    background-color: var(--gray-20);
  }

  body.theme-dark & {
    border: 1px solid var(--gray-100);
    background-color: var(--gray-90);
    color: var(--white);

    &:hover {
      border-color: var(--gray-70);
      background-color: var(--gray-80);
    }

    &:focus-visible {
      background-color: var(--gray-80);
    }
  }

  &.active {
    border: 1px solid var(--accent-color-300);
    background-color: var(--accent-color-50);
    color: var(--accent-color);

    body.theme-dark & {
      border: 1px solid var(--accent-color-600);
      background-color: var(--accent-color-800);
      color: var(--white);
    }
  }

  &[disabled]:not([disabled='false']) {
    border: transparent !important;
    background-color: var(--gray-50) !important;
    color: var(--gray-80) !important;
    cursor: not-allowed;
    outline: none !important;

    body.theme-dark & {
      background-color: var(--gray-70) !important;
      color: var(--black) !important;
    }
  }
}

.button-icon-secondary() {
  .button-icon-new;
  border: 0;
  background-color: transparent;
  color: #33373a;

  &:hover,
  &:focus-visible,
  &.active {
    color: var(--accent-color-500);
  }

  &:focus-visible {
    .focus-outline;
    .focus-offset;
    outline-offset: -0.2rem;
  }

  body.theme-dark & {
    color: var(--white);

    &:hover,
    &:focus-visible,
    &.active {
      color: var(--accent-color-500);
    }
  }

  &.active {
    background-color: var(--gray-10);

    body.theme-dark & {
      border: 1px solid var(--accent-color-800);
      background-color: var(--black);
    }
  }

  &[disabled]:not([disabled='false']) {
    border: transparent !important;
    background-color: transparent !important;
    color: var(--gray-60) !important;
    cursor: not-allowed;
    outline: none !important;

    body.theme-dark & {
      color: var(--gray-70) !important;
    }
  }
}