@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

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

@layer base {
  input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="number"],input[type="time"] {
    @apply bg-white border border-zinc-300 rounded-md px-3 py-2 text-zinc-700 ring-0;

    &:focus {
      @apply outline-none ring-0 border border-primary-500;
    }

    &::placeholder {
      @apply text-zinc-400 leading-[20px];
    }
  }

  input[type="checkbox"] {
    @apply border-2 rounded-sm border-zinc-600 text-primary-500;

    &:focus {
      @apply ring-0 ring-offset-0;
    }
  }

  label {
    @apply text-zinc-700 font-extrabold text-sm;
  }

  select {
    @apply border-zinc-300 rounded-md focus:ring-0 focus:border-primary-500;
  }
}

@layer components {
  .btn-base {
    @apply py-1.5 px-6 text-sm leading-[21px] font-extrabold rounded-[20px] text-center bg-white;
  }

  .btn-primary {
    @apply btn-base bg-primary-500 text-white;
    @apply focus:bg-primary-600;
    @apply disabled:bg-zinc-400;
  }

  .btn-secondary {
    @apply btn-base border border-primary-500 text-primary-500;
    @apply focus:border-primary-600 focus:text-primary-600;
    @apply disabled:border-zinc-400 disabled:text-zinc-400;
  }

  .btn-danger {
    @apply btn-base border border-danger-500 text-danger-500;
    @apply focus:border-danger-600 focus:text-danger-600;
    @apply disabled:border-zinc-400 disabled:text-zinc-400;
  }

  .link-primary {
    @apply text-primary-500 font-extrabold;
    @apply focus:text-primary-600;
  }

  .rounded-box {
    @apply bg-white box-shadow rounded-[20px] py-5 px-3;
  }

  .helper-text {
    @apply text-zinc-500 text-sm leading-[20px];
  }

  .avatar {
    @apply flex items-center justify-center rounded-full uppercase font-extrabold w-9 h-9;

    &.avatar-default {
      @apply bg-gray-200 text-zinc-700;
    }

    &.avatar-primary {
      @apply bg-primary-500 text-white;
    }
  }

  .badge {
    @apply px-4 py-1 text-xs text-center leading-3 rounded-full font-extrabold;

    &.badge-danger {
      @apply bg-red-100 text-danger-500;
    }

    &.badge-success {
      @apply bg-lime-50 text-green-700;
    }
  }
}

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .rtl {
    direction: rtl;
  }
}

.text-nowrap {
  text-wrap: nowrap;
}

.box-shadow {
  box-shadow: 7px 7px 7px 0px rgba(104, 73, 242, 0.06), 0px 2px 4px 0px rgba(104, 73, 242, 0.06), 0px 4px 6px 0px rgba(0, 0, 0, 0.10);
}
/* bridge--buttons component */
[data-bridge-components~="left-button"]
[data-controller*="left-button"] {
  display: none;
}
[data-bridge-components~="right-button"]
[data-controller*="right-button"] {
  display: none;
}
.flatpickr-calendar {
  margin: auto;
  box-shadow: none;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
  display: none;
}

.flatpickr-months {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #F7F2F2;
}

.flatpickr-current-month span.cur-month {
  font-weight: 900;
  color: #52525B;
}

.flatpickr-current-month input.cur-year {
  font-weight: 900;
  color: #52525B;
}

span.flatpickr-weekday {
  text-transform: uppercase;
  font-weight: 500;
  color: #52525B;
}

.flatpickr-day {
  font-weight: 500;
  color: #52525B;
}

.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  font-weight: 500;
  color: #F4F4F5;
}

.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.flatpickr-day.nextMonthDay,
.flatpickr-day.selected.flatpickr-day.prevMonthDay {
  background: #6849F2;
  border-color: #6849F2;
}

.toast-notice {
  background: linear-gradient(to right, #4e54c8, #8f94fb);
}

.toast-success {
  background: linear-gradient(to right, #06beb6, #48b1bf);
}

.toast-warning {
  background: linear-gradient(to right, #f2994a, #f2c94c);
}

.toast-error {
  background: linear-gradient(to right, #ed213a, #93291e);
}
/*
 * 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.
 *


 */

 .with-bg {
  background-image: url(/images/background.svg);
  background-size: 150% auto;
  background-position: center center;
  background-repeat: no-repeat;
}

.input-currency {
  position: relative;
}
.input-currency input {
  padding-left: 24px;
}
.input-currency:before {
  position: absolute;
  top: 0px;
  content: '$';
  left: 12px;
  height: 100%;
  display: flex;
  align-items: center;
}