// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flexColumn {
  display: flex;
  flex-direction: column;
  gap: $s-4;
}

@mixin flexRow {
  display: flex;
  align-items: center;
  gap: $s-4;
}

@mixin buttonStyle {
  border: none;
  background: none;
  cursor: pointer;
}

@mixin removeInputStyle {
  border: none;
  background: none;
  outline: none;
}

@mixin tabTitleTipography {
  font-family: "worksans", sans-serif;
  font-size: $fs-11;
  font-weight: $fw500;
  line-height: 1.2;
  text-transform: uppercase;
}

@mixin titleTipography {
  font-family: "worksans", sans-serif;
  font-size: $fs-12;
  font-weight: $fw400;
  line-height: 1.2;
}

@mixin medTitleTipography {
  font-family: "worksans", sans-serif;
  font-size: $fs-14;
  font-weight: $fw400;
  line-height: 1.2;
}

@mixin bigTitleTipography {
  font-family: "worksans", sans-serif;
  font-size: $fs-24;
  font-weight: $fw400;
  line-height: 1.2;
}

@mixin textEllipsis {
  max-width: 99%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

@mixin twoLineTextEllipsis {
  max-width: 99%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@mixin inspectValue {
  @include titleTipography;
  display: inline-block;
  width: fit-content;
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--menu-foreground-color);
}

@mixin copyWrapper {
  @include flexColumn;
  position: relative;
  min-height: $s-32;
  width: $s-156;
  max-width: $s-156;
  padding: calc($s-8 - $s-1) 0 calc($s-8 - $s-1) calc($s-8 - $s-1);
  border-radius: $s-8;
  box-sizing: border-box;
}

@mixin hiddenElement {
  cursor: default;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--input-foreground-color-disabled);
  stroke: var(--input-foreground-color-disabled);
  background-color: transparent;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}