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

@layer base {
  input[type='text'],
  input[type='password'],
  input[type='email'],
  input[type='number'],
  input[type='url'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='week'],
  input[type='time'],
  input[type='tel'],
  input[type='checkbox'],
  select,
  select[multiple],
  textarea {
    @apply text-xs rounded p-2 my-2 border border-gray-300 shadow-sm focus:border-booko focus:ring-booko dark:text-gray-800;
  }
  body {
    font-family: OpenSans;
    @apply text-gray-600 dark:text-gray-100;
  }
  h1 {
    font-family: AlegreyaSansSC;
    @apply text-4xl text-gray-800 dark:text-gray-200 tracking-tight;
  }
  h2 {
    @apply font-semibold text-gray-700 dark:text-gray-100 text-xl;
  }
  
  h3 {
    @apply text-booko font-semibold ;
  }
  
  aside {
    @apply text-sm font-light;
  }

  a {
    @apply no-underline hover:underline;
  }

}

@layer utilities { 
  .columns-1 { -moz-columns: 1; columns: 1 }
  .columns-2 { -moz-columns: 2; columns: 2 }
  .columns-3 { -moz-columns: 3; columns: 3 }
  .columns-4 { -moz-columns: 4; columns: 4 }
  .columns-5 { -moz-columns: 5; columns: 5 }
  .columns-6 { -moz-columns: 6; columns: 6 }
  .columns-7 { -moz-columns: 7; columns: 7 }
}

@font-face {
  font-family: 'OpenSans';
  src: url(/assets/OpenSans/opensans-light-webfont.eot) format('embedded-opentype'),
     url(/assets/OpenSans/opensans-light-webfont.woff) format('woff'),
     url(/assets/OpenSans/opensans-light-webfont.woff2) format('woff2'),
     url(/assets/OpenSans/opensans-light-webfont.ttf) format('truetype'),
     url(/assets/OpenSans/opensans-light-webfont.svg) format('svg');

     font-weight: 300;
     font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url(/assets/OpenSans/opensans-regular-webfont.eot) format('embedded-opentype'),
     url(/assets/OpenSans/opensans-regular-webfont.woff) format('woff'),
     url(/assets/OpenSans/opensans-regular-webfont.woff2) format('woff2'),
     url(/assets/OpenSans/opensans-regular-webfont.ttf) format('truetype'),
     url(/assets/OpenSans/opensans-regular-webfont.svg) format('svg');

     font-weight: 400;
     font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url(/assets/OpenSans/opensans-semibold-webfont.eot) format('embedded-opentype'),
     url(/assets/OpenSans/opensans-semibold-webfont.woff) format('woff'),
     url(/assets/OpenSans/opensans-semibold-webfont.woff2) format('woff2'),
     url(/assets/OpenSans/opensans-semibold-webfont.ttf) format('truetype'),
     url(/assets/OpenSans/opensans-semibold-webfont.svg) format('svg');

     font-weight: 600;
     font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url(/assets/OpenSans/opensans-bold-webfont.eot) format('embedded-opentype'),
     url(/assets/OpenSans/opensans-bold-webfont.woff) format('woff'),
     url(/assets/OpenSans/opensans-bold-webfont.woff2) format('woff2'),
     url(/assets/OpenSans/opensans-bold-webfont.ttf) format('truetype'),
     url(/assets/OpenSans/opensans-bold-webfont.svg) format('svg');

     font-weight: 700;
     font-style: normal;
}

@font-face {
  font-family: 'AlegreyaSansSC';
  src: url(/assets/Alegreya_Sans_SC/AlegreyaSansSC-Regular.ttf) format('truetype');

     font-weight: 400;
     font-style: normal;
}

/* iOS puts a weird shaddow on input boxes : https://stackoverflow.com/questions/23211656/remove-ios-input-shadow */
input[type=text] {   
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.bk-menu {
  @apply absolute border rounded bg-white text-black normal-case p-4 mt-2 shadow-lg max-w-sm z-10 hover:no-underline
}

.tnybtn, .bk-tnybtn {
  @apply inline-flex py-1 px-2 m-1 rounded bg-booko border border-booko text-white text-xs hover:bg-booko-600 hover:no-underline
}

.tnybtn3 {
  @apply inline-flex py-1 px-2 m-1 rounded bg-secondary border border-secondary text-white text-xs hover:bg-secondary-darker hover:no-underline
}

.bk-tnybtn2 {
  @apply inline-flex py-1 px-2 m-1 rounded bg-white dark:bg-tertiary-500 border border-booko text-booko text-xs hover:bg-booko-100 hover:no-underline
}

.btn, .bk-btn {
  @apply inline-flex py-2 px-3 m-1 rounded-md bg-booko text-white hover:bg-booko-600 text-sm hover:no-underline
}

.new_price_btn {
  @apply text-sm leading-5 font-semibold px-2 py-1 inline-flex  rounded-full bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 whitespace-nowrap hover:no-underline
}

.used_price_btn {
  @apply text-sm leading-5 font-semibold px-2 py-1 inline-flex rounded-full bg-booko-lightest text-booko-darker dark:bg-booko-700 dark:text-booko-lightest whitespace-nowrap hover:no-underline
}

.edit_section {
  @apply rounded-xl bg-tertiary m-2 p-4 hover:no-underline
}

.tooltip {
  @apply invisible absolute;
}

.has-tooltip:hover .tooltip {
  @apply visible z-50
}
button .show-when-enabled { @apply inline }
button .show-when-disabled { @apply hidden }
button[disabled] .show-when-enabled { @apply hidden }
button[disabled] .show-when-disabled { @apply inline }

span.active { 
  @apply underline
}
/*
 * 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.
 *



 */

/* line 3, vendor/assets/stylesheets/tiny-slider.scss */
.tns-outer {
  padding: 0 !important;
}

/* line 5, vendor/assets/stylesheets/tiny-slider.scss */
.tns-outer [hidden] {
  display: none !important;
}

/* line 6, vendor/assets/stylesheets/tiny-slider.scss */
.tns-outer [aria-controls], .tns-outer [data-action] {
  cursor: pointer;
}

/* line 8, vendor/assets/stylesheets/tiny-slider.scss */
.tns-slider {
  transition: all 0s;
}

/* line 12, vendor/assets/stylesheets/tiny-slider.scss */
.tns-slider > .tns-item {
  box-sizing: border-box;
}

/* line 20, vendor/assets/stylesheets/tiny-slider.scss */
.tns-horizontal.tns-subpixel {
  white-space: nowrap;
}

/* line 22, vendor/assets/stylesheets/tiny-slider.scss */
.tns-horizontal.tns-subpixel > .tns-item {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}

/* line 29, vendor/assets/stylesheets/tiny-slider.scss */
.tns-horizontal.tns-no-subpixel:after {
  content: '';
  display: table;
  clear: both;
}

/* line 34, vendor/assets/stylesheets/tiny-slider.scss */
.tns-horizontal.tns-no-subpixel > .tns-item {
  float: left;
}

/* line 40, vendor/assets/stylesheets/tiny-slider.scss */
.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
  margin-right: -100%;
}

/* line 46, vendor/assets/stylesheets/tiny-slider.scss */
.tns-no-calc {
  position: relative;
  left: 0;
}

/* line 50, vendor/assets/stylesheets/tiny-slider.scss */
.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px;
}

/* line 55, vendor/assets/stylesheets/tiny-slider.scss */
.tns-gallery > .tns-item {
  position: absolute;
  left: -100%;
  transition: transform 0s, opacity 0s;
}

/* line 62, vendor/assets/stylesheets/tiny-slider.scss */
.tns-gallery > .tns-slide-active {
  position: relative;
  left: auto !important;
}

/* line 66, vendor/assets/stylesheets/tiny-slider.scss */
.tns-gallery > .tns-moving {
  transition: all 0.25s;
}

/* line 72, vendor/assets/stylesheets/tiny-slider.scss */
.tns-autowidth {
  display: inline-block;
}

/* line 73, vendor/assets/stylesheets/tiny-slider.scss */
.tns-lazy-img {
  transition: opacity 0.6s;
  opacity: 0.6;
}

/* line 78, vendor/assets/stylesheets/tiny-slider.scss */
.tns-lazy-img.tns-complete {
  opacity: 1;
}

/* line 80, vendor/assets/stylesheets/tiny-slider.scss */
.tns-ah {
  transition: height 0s;
}

/* line 85, vendor/assets/stylesheets/tiny-slider.scss */
.tns-ovh {
  overflow: hidden;
}

/* line 86, vendor/assets/stylesheets/tiny-slider.scss */
.tns-visually-hidden {
  position: absolute;
  left: -10000em;
}

/* line 87, vendor/assets/stylesheets/tiny-slider.scss */
.tns-transparent {
  opacity: 0;
  visibility: hidden;
}

/* line 89, vendor/assets/stylesheets/tiny-slider.scss */
.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0;
}

/* line 94, vendor/assets/stylesheets/tiny-slider.scss */
.tns-normal, .tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

/* line 102, vendor/assets/stylesheets/tiny-slider.scss */
.tns-vpfix {
  white-space: nowrap;
}

/* line 104, vendor/assets/stylesheets/tiny-slider.scss */
.tns-vpfix > div, .tns-vpfix > li {
  display: inline-block;
}

/* line 116, vendor/assets/stylesheets/tiny-slider.scss */
.tns-t-subp2 {
  margin: 0 auto;
  width: 310px;
  position: relative;
  height: 10px;
  overflow: hidden;
}

/* line 123, vendor/assets/stylesheets/tiny-slider.scss */
.tns-t-ct {
  width: 2333.3333333333%;
  width: calc(100% * 70 / 3);
  position: absolute;
  right: 0;
}

/* line 130, vendor/assets/stylesheets/tiny-slider.scss */
.tns-t-ct:after {
  content: '';
  display: table;
  clear: both;
}

/* line 135, vendor/assets/stylesheets/tiny-slider.scss */
.tns-t-ct > div {
  width: 1.4285714286%;
  width: calc(100% / 70);
  height: 10px;
  float: left;
}