@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  @font-face {
    font-family: "SuisseIntl";
    src: url('assets/fonts/SuisseIntl/SuisseIntl-Regular.ttf');
  }
  @font-face {
    font-family: "SpaceGrotesk";
    src: url('assets/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf');
  }
  @font-face {
    font-family: "SpaceGrotesk";
    font-weight: 500;
    src: url('assets/fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf');
  }
  @font-face {
    font-family: "SpaceMono";
    font-weight: 400;
    src: url('assets/fonts/SpaceMono/SpaceMono-Regular.ttf');
  }
  @font-face {
    font-family: "SpaceMono";
    font-weight: 700;
    src: url('assets/fonts/SpaceMono/SpaceMono-Bold.ttf');
  }

  body {
    @apply font-body text-black overflow-x-hidden;
    -webkit-user-select: none;
  }

  .drag-area {
    -webkit-app-region: drag;    
  }
  
  .no-drag-area {
    -webkit-app-region: no-drag;    
  }

  input {
    -webkit-user-select: text;
  }
  
  p {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  canvas {
    max-width: 100%;
  }

  .app-bg {
    background-image: url('./assets/img/bg-pattern.svg');
    background-repeat: no-repeat;
    background-size: 86vw;
    background-position: 10vw 80%;
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #A0A1BA #F1F1F5;
  }

  .no-overflow-text {
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;    
  }

  .destination-address-form {
    transition: 
      transform calc(0.3s * var(--factor)) ease, 
      padding calc(0.3s * var(--factor)) ease, 
      max-height calc(0.3s * var(--factor)) ease, 
      background-color calc(0.3s * var(--factor)) calc(0.3s * var(--factor)) ease;
  }
  
  .destination-address-form-info {
    transition: all calc(0.3s * var(--factor)) ease;
  }
  
  .destination-address-form-input {
    transition: 
      transform calc(0.3s * var(--factor)) ease,
      background-color calc(0.3s * var(--factor)) calc(0.3s * var(--factor)) ease,
      color calc(0.3s * var(--factor)) calc(0.3s * var(--factor)) ease
  }

  .balance-control {
    transition: 
      width calc(0.3s * var(--factor)) cubic-bezier(0.25, 1, 0.5, 1),
      height calc(0.3s * var(--factor)) cubic-bezier(0.25, 1, 0.5, 1),
      border-radius calc(0.3s * var(--factor)) calc(0.1s * var(--factor)) cubic-bezier(0.25, 1, 0.5, 1),
      background-color calc(0.2s * var(--factor)) ease;
  }

  .balance-control-wrapper {
    animation: fadeIn 500ms 200ms ease-in forwards;
  }
}

@layer components {
  .btn-primary {
    @apply py-2 px-4 h-12 rounded-full font-body text-body-s w-fit
    bg-transparent text-white border border-white border-solid
    hover:bg-white hover:text-primary hover:drop-shadow-[0_6px_12px_rgba(0,0,0,0.25)]
    active:bg-grayscale-250 active:text-primary active:drop-shadow-[0_2px_4px_rgba(0,0,0,0.32)]
    disabled:bg-transparent disabled:text-white disabled:opacity-50
    disabled:outline disabled:outline-1 disabled:outline-white
  }

  .btn-primary-small {
    @apply py-2 px-4 rounded-full font-body text-body-s text-white
    bg-primary hover:bg-primary-hover visited:bg-primary-click
    disabled:bg-grayscale-500 disabled:text-grayscale-700;
  }

  .btn-icon-primary-small {
    @apply h-4 w-4 m-1
  }

  .icon-primary path {
    @apply fill-primary group-hover:fill-primary-hover group-visited:fill-primary-click
    group-disabled:fill-grayscale-500
  }

  .icon-primary-white path {
    @apply fill-white
  }

  .icon-warning path {
    @apply fill-orange-200 group-hover:fill-orange-200 group-visited:fill-orange-200
    group-disabled:fill-grayscale-500
  }

  .icon-error path {
    @apply fill-red-200 group-hover:fill-red-200 group-visited:fill-red-200
    group-disabled:fill-grayscale-500
  }

  .btn-secondary {
    @apply font-body text-body-m
      text-primary
      hover:text-primary-hover
      visited:text-primary-click 
      disabled:text-grayscale-700;
  }

  .btn-secondary-small {
    @apply py-2 px-4 rounded-full font-body text-body-xs bg-opacity-0 border border-solid
     border-primary border-opacity-25  text-primary
     hover:border-primary-hover hover:border-opacity-25 hover:text-primary-hover
     visited:border-primary-click visited:border-opacity-25 visited:text-primary-click 
     disabled:border-grayscale-500 disabled:text-grayscale-500;  
  }

  input:focus ~ label,	
  input:not(:placeholder-shown) ~ label{	
    --tw-rotate: 0;	
    --tw-skew-x: 0;	
    --tw-skew-y: 0;	
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))	
      skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));	
    --tw-translate-y: -2rem;
    @apply text-body-3xs
  }

  .nav-button {
    @apply rounded outline-dashed outline-1 bg-slate-50 outline-slate-50
  }
  .nav-button.active {
    @apply bg-slate-200 text-primary outline-slate-400
  }
  .nav-button:not(.active):hover, .nav-button:not(.active):focus-visible {
    @apply bg-slate-100 text-black  outline-slate-400
  }
}
