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

@font-face {
  font-family: 'Kautiva Pro';
  src: url(/assets/fonts/Kautiva_Pro_Bold-cbfd1f00b16bdb44cb71f266d8d6e44618b412df57793540757df500424d05fd.otf) format("opentype");
}

@font-face {
  font-family: 'Kautiva Pro Black';
  src: url(/assets/fonts/Kautiva_Pro_Black-e1eb9b5db909f9abe8a42165a21b6570806a9b3fc15a711938bf0cfd20b5d5c7.otf) format("opentype");
}

@font-face {
  font-family: 'Araboto Pro';
  src: url(/assets/fonts/Araboto_Normal_400-f1075d0c86433d5de6729f53584a89e64d5db6768e444fa00eb701dcdbdad643.ttf) format("truetype");
}

@font-face {
  font-family: 'Araboto Pro Medium';
  src: url(/assets/fonts/Araboto_Medium_400-ccbbc31774f990df9ee728bdc63f2ada4eb106733bcd34e507c0b542b2db18c7.ttf) format("truetype");
}

@font-face {
  font-family: 'Araboto Pro Bold';
  src: url(/assets/fonts/Araboto_Bold_400-ab9408686d52e37c4b8ec2f692c30072a300d48bf89c3236853ad47bcbc56f5f.ttf) format("truetype");
}

@font-face {
  font-family: 'Araboto Pro Black';
  src: url(/assets/fonts/Araboto_Black_400-ce166049096fc67b35772eab17155294a5eebcd6aa4bd22ff7e6ee84e8dfdc3e.ttf) format("truetype");
}

@layer components {
  .btn {
    @apply py-3 px-4 border border-black rounded-full text-sm leading-none font-araboto cursor-pointer break-keep;
  }

  .btn-primary {
    @apply bg-black text-white disabled:bg-black-200 disabled:border-black-200 disabled:text-grey-100 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-white text-black;
  }

  .btn-tertiary {
    @apply bg-grey-30 border-grey-30 text-black;
  }

  .btn-danger {
    @apply bg-danger-500 border-danger-500 text-white;
  }

  .txt {
    @apply pt-2.5 pb-2 px-4 border border-white border-solid text-sm rounded-md font-normal font-araboto outline-none break-keep;
  }

  .txt-primary {
    @apply focus:shadow-secondary focus:border-secondary focus:ring-secondary;
  }

  .txt-secondary {
    @apply focus:shadow-tertiary focus:border-tertiary focus:ring-tertiary bg-grey-10 border-grey-30;
  }

  .select {
    @apply txt;
  }

  .date {
    @apply txt;
  }

  .table {
    @apply border-collapse;
  }

  .table.no-break-line {
    @apply max-w-full whitespace-nowrap;
  }

  .table.no-break-line th, .table.no-break-line td {
    @apply break-keep;
  }

  .table thead tr th {
    @apply text-grey-600 font-araboto-black text-xs leading-3 py-4.5 px-4 uppercase text-left border-b border-grey-100;
  }

  .table tbody tr td {
    @apply font-araboto text-sm leading-3 py-4.5 px-4 border-b border-grey-100;
  }

  .table tbody tr:nth-child(odd) {
    @apply bg-grey-10;
  }

  .table tbody tr.selected {
    @apply bg-tertiary;
  }

  .table thead tr .sort-column {
    @apply cursor-pointer;
  }

  .table thead tr .sort-column .up,
  .table thead tr .sort-column .down {
    @apply hidden;
  }

  .table thead tr .sort-up .up {
    @apply block;
  }

  .table thead tr .sort-up .down {
    @apply hidden;
  }

  .table thead tr .sort-down .up {
    @apply hidden;
  }

  .table thead tr .sort-down .down {
    @apply block;
  }

  .badge {
    @apply font-kautiva-bold px-2 py-1 rounded leading-none;
  }

  .online {
    @apply bg-green-500 text-white rounded-full h-2 w-2;
  }

  .offline {
    @apply bg-red-500 text-white rounded-full h-2 w-2;
  }

  .passenger-show-height {
    height: calc(100% - 170px);
  }

  .historical-tabs-height {
    height: calc(100% - 90px);
  }

  .delayed {
    @apply bg-danger-50 text-danger-500 text-xxs leading-none;
  }

  .miss-placed {
    @apply delayed;
  }

  .unknown {
    @apply bg-secondary text-danger-500 text-xxs leading-none;
  }

  .departure-airport {
    @apply bg-orange-50 text-orange-800 text-xxs leading-none;
  }

  .arrival-airport {
    @apply bg-green-50 text-green-900 text-xxs leading-none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */