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

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=fallback');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

@layer base {
  html {
    @apply text-habitBlue-500;
  }
}

@layer components {
    .brand-title {
        font-family: 'Hanken Grotesk';
    }

    .btn-primary {
        @apply py-2 px-4;
    }

    div.field_with_errors {
        display: inline;
    }

    /* should be rose 500 but the @apply syntax wasn't working and I ran out of time to debug */
    div.field_with_errors input {
        --tw-border-opacity: 1;
        border-color: rgb(253 164 175/var(--tw-border-opacity)) !important;
    }

    /* Utililty Patterns */
    /* Typography */
    .h1 {
        @apply text-4xl font-extrabold tracking-tighter;
    }

    .h2 {
        @apply text-3xl font-extrabold tracking-tighter;
    }

    .h3 {
        @apply text-3xl font-extrabold;
    }

    .h4 {
        @apply text-2xl font-extrabold tracking-tight;
    }

    @screen md {
        .h1 {
            @apply text-5xl;
        }

        .h2 {
            @apply text-4xl;
        }
    }

    /* Modal */
    .modal-container {
        @apply flex flex-col h-full px-5 py-4 overflow-y-auto;
    }

    .modal-header {
        @apply text-2xl text-habitBlue-500 text-center;
    }

    .modal-header {
        font-family: 'Lora';
    }

    .lora {
        font-family: 'Lora';
    }

    .modal-content {
        @apply flex flex-col flex-auto text-habitBlue-500 text-sm px-5;
    }

    .modal-content>div {
        @apply mt-4;
    }

    .modal-actions {
        @apply mt-3 mb-8 w-full self-end flex flex-col flex-1 justify-center text-center;
    }

    .modal-actions>div {
        @apply mt-4 w-full;
    }

    /* Buttons */
    .btn,
    .btn-lg,
    .btn-sm,
    .btn-xs {
        @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded leading-5 shadow-sm transition duration-150 ease-in-out;
    }

    .btn {
        @apply px-3 py-2;
    }

    .btn-lg {
        @apply px-4 py-3;
    }

    .btn-sm {
        @apply px-2 py-1;
    }

    .btn-xs {
        @apply px-2 py-0.5;
    }

    .btn--primary-ns {
        @apply bg-habitYellow-900 hover:bg-habitYellow-800 text-center m-auto text-base cursor-pointer uppercase;
    }

    .btn--primary {
        @apply bg-habitYellow-900 py-3 px-3 hover:bg-habitYellow-800 text-center m-auto text-base cursor-pointer uppercase;
    }

    .btn--secondary-ns {
        @apply bg-white font-bold border-habitPink-700 text-habitPink-700 hover:text-habitPink-800 m-auto cursor-pointer;
    }

    .btn--secondary {
        @apply bg-white py-2 px-3 font-bold border-habitPink-700 text-habitPink-700 hover:text-habitPink-800 m-auto cursor-pointer;
    }

    .btn--text {
        @apply m-auto block cursor-pointer text-habitBlue-500 uppercase;
    }

    ul.btn--group-v {
        @apply grid grid-cols-1 w-full;

        li {
            @apply border-b border-r border-l rounded-none;
        }

        :first-child {
            @apply rounded-t-lg !border-t;
        }

        :last-child {
            @apply !rounded-b-lg;
        }
    }

    /* Forms */
    .form--label {
        @apply text-lg font-semibold text-habitBlue-500;
    }

    .form--multi-checkbox {
        @apply flex flex-wrap justify-around items-center;

        label {
            @apply font-medium;
        }
    }

    input[disabled="disabled"] {
        @apply disabled:border-slate-300 disabled:bg-slate-100 disabled:text-slate-700 disabled:cursor-not-allowed;
    }

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: none;
    }

    .form-input,
    .form-textarea,
    .form-multiselect,
    .form-select,
    .form-checkbox,
    .form-radio {
        @apply text-sm text-slate-900 bg-white border;
    }

    .form-input,
    .form-textarea,
    .form-multiselect,
    .form-select,
    .form-checkbox {
        @apply rounded;
    }

    .form-input,
    .form-textarea,
    .form-multiselect,
    .form-select {
        @apply leading-5 py-2 px-3 border-slate-400 hover:border-slate-600 focus:border-indigo-300 shadow-sm;
    }

    .form-input,
    .form-textarea {
        @apply placeholder-slate-700;
    }

    .form-select {
        @apply pr-10;
    }

    .form-radio {
        @apply text-habitPink-700 border border-slate-300;
    }

    .form-checkbox {
        @apply text-habitPink-900 border border-slate-300;
    }

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

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

    /* Switch element */
    .form-switch {
        @apply relative select-none;
        width: 44px;
    }

    .form-switch label {
        @apply block overflow-hidden cursor-pointer h-6 rounded-full;
    }

    .form-switch label>span:first-child {
        @apply absolute block rounded-full;
        width: 20px;
        height: 20px;
        top: 2px;
        left: 2px;
        right: 50%;
        transition: all .15s ease-out;
    }

    .form-switch input[type="checkbox"]:checked+label {
        @apply bg-indigo-500;
    }

    .form-switch input[type="checkbox"]:checked+label>span:first-child {
        left: 22px;
    }

    .form-switch input[type="checkbox"]:disabled+label {
        @apply cursor-not-allowed bg-slate-100 border border-slate-200;
    }

    .form-switch input[type="checkbox"]:disabled+label>span:first-child {
        @apply bg-slate-400;
    }

    /* Customise flatpickr */
    * {
        --calendarPadding: 24px;
        --daySize: 36px;
        --daysWidth: calc(var(--daySize)*7);
    }

    @keyframes fpFadeInDown {
        from {
            opacity: 0;
            transform: translate3d(0, -8px, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .flatpickr-calendar {
        border: inherit;
        @apply rounded shadow-lg border border-slate-200 left-1/2;
        margin-left: calc(calc(var(--daysWidth) + calc(var(--calendarPadding)*2))*0.5*-1);
        padding: var(--calendarPadding);
        width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
    }

    @screen lg {
        .flatpickr-calendar {
            @apply left-0 right-auto;
            margin-left: 0;
        }
    }

    .flatpickr-right.flatpickr-calendar {
        @apply right-0 left-auto;
        margin-left: 0;
    }

    .flatpickr-calendar.animate.open {
        animation: fpFadeInDown 200ms ease-out;
    }

    .flatpickr-calendar.static {
        position: absolute;
        top: calc(100% + 4px);
    }

    .flatpickr-calendar.static.open {
        z-index: 20;
    }

    .flatpickr-days {
        width: var(--daysWidth);
    }

    .dayContainer {
        width: var(--daysWidth);
        min-width: var(--daysWidth);
        max-width: var(--daysWidth);
    }

    .flatpickr-day {
        @apply bg-slate-50 text-sm font-medium text-slate-600;
        max-width: var(--daySize);
        height: var(--daySize);
        line-height: var(--daySize);
    }

    .flatpickr-day,
    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay {
        border: none;
    }

    .flatpickr-day,
    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay,
    .flatpickr-day.selected.startRange,
    .flatpickr-day.startRange.startRange,
    .flatpickr-day.endRange.startRange,
    .flatpickr-day.selected.endRange,
    .flatpickr-day.startRange.endRange,
    .flatpickr-day.endRange.endRange,
    .flatpickr-day.selected.startRange.endRange,
    .flatpickr-day.startRange.startRange.endRange,
    .flatpickr-day.endRange.startRange.endRange {
        border-radius: 0;
    }

    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover,
    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay,
    .flatpickr-day.notAllowed,
    .flatpickr-day.notAllowed.prevMonthDay,
    .flatpickr-day.notAllowed.nextMonthDay {
        @apply text-slate-400;
    }

    .rangeMode .flatpickr-day {
        margin: 0;
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover,
    .flatpickr-day.selected.prevMonthDay,
    .flatpickr-day.startRange.prevMonthDay,
    .flatpickr-day.endRange.prevMonthDay,
    .flatpickr-day.selected.nextMonthDay,
    .flatpickr-day.startRange.nextMonthDay,
    .flatpickr-day.endRange.nextMonthDay {
        @apply bg-indigo-500 text-indigo-50;
    }

    .flatpickr-day.inRange,
    .flatpickr-day.prevMonthDay.inRange,
    .flatpickr-day.nextMonthDay.inRange,
    .flatpickr-day.today.inRange,
    .flatpickr-day.prevMonthDay.today.inRange,
    .flatpickr-day.nextMonthDay.today.inRange,
    .flatpickr-day:hover,
    .flatpickr-day.prevMonthDay:hover,
    .flatpickr-day.nextMonthDay:hover,
    .flatpickr-day:focus,
    .flatpickr-day.prevMonthDay:focus,
    .flatpickr-day.nextMonthDay:focus,
    .flatpickr-day.today:hover,
    .flatpickr-day.today:focus {
        @apply bg-indigo-400 text-indigo-50;
    }

    .flatpickr-day.inRange,
    .flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
    .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),
    .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
        box-shadow: none;
    }

    .flatpickr-months {
        align-items: center;
        margin-top: -8px;
        margin-bottom: 6px;
    }

    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        position: static;
        height: auto;
        @apply text-slate-600;
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        width: 7px;
        height: 11px;
    }

    .flatpickr-months .flatpickr-prev-month:hover,
    .flatpickr-months .flatpickr-next-month:hover,
    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: inherit;
        @apply text-slate-400;
    }

    .flatpickr-months .flatpickr-prev-month {
        margin-left: -10px;
    }

    .flatpickr-months .flatpickr-next-month {
        margin-right: -10px;
    }

    .flatpickr-months .flatpickr-month {
        @apply text-slate-800;
        height: auto;
        line-height: inherit;
    }

    .flatpickr-current-month {
        @apply text-sm font-medium;
        position: static;
        height: auto;
        width: auto;
        left: auto;
        padding: 0;
    }

    .flatpickr-current-month span.cur-month {
        @apply font-medium m-0;
    }

    .flatpickr-current-month span.cur-month:hover {
        background: none;
    }

    .flatpickr-current-month input.cur-year {
        font-weight: inherit;
        box-shadow: none !important;
    }

    .numInputWrapper:hover {
        background: none;
    }

    .numInputWrapper span {
        display: none;
    }

    span.flatpickr-weekday {
        @apply text-slate-400 font-medium text-xs;
    }

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

    .form-input:focus,
    .form-textarea:focus,
    .form-multiselect:focus,
    .form-select:focus,
    .form-checkbox:focus,
    .form-radio:focus {
        @apply ring-0;
    }

    [x-cloak=""] {
        display: none;
    }

    @media screen and (max-width: theme('screens.lg')) {
        [x-cloak="lg"] {
            display: none;
        }
    }

}
.streak.circle.complete {
  position: relative;
  background: #D777E2;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.streak.circle.incomplete {
  position: relative;
  background: white;
  border: 1px solid lightgray;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.streak.circle.complete .checkmark {
  position: absolute;
  transform: rotate(45deg) translate(-50%, -50%);
  left: 35%;
  top: 45%;
  height: 10px;
  width: 5px;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
}

.streak.circle.incomplete .checkmark {
  position: absolute;
  transform: rotate(45deg) translate(-50%, -50%);
  left: 35%;
  top: 45%;
  height: 10px;
  width: 5px;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
}
input[type="date"]:not(:focus):not(.has-value):before{
  color: gray;
  content: attr(placeholder);
}
.feelings-check-selector {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.feelings-check-selector-c {
  flex-basis: 33%;
  text-align: center;
}

.feelings-check-selector input{
    margin:0;padding:0;
    background-color: transparent;
    border-width: 0;
    display: none;

    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.feelings-check-selector input:checked{
  background-image: none;
  background-color: transparent;
}
.feelings-check-selector input:hover{
  background-image: none;
  background-color: transparent;
}

.feelings-check-selector input:focus{
  background-image: none;
  background-color: transparent;
  border-color: transparent;
  border-width: 0;
}

.feelings-check-selector input:checked:focus{
  background-image: none;
  background-color: transparent;
  border-color: transparent;
  border-width: 0;
}
.feelings-check-selector input:indeterminate{
  background-image: none;
  background-color: transparent;
  border-color: transparent;
  border-width: 0;
}
.feeling_score--1 { background-image: url(/assets/pensive-face-4b6c0487f726a717fc79f2045725290fba3401f6dece5ed575ac773b35c9e357.png); }
.feeling_score-0{ background-image: url(/assets/woman-shrugging-light-skin-tone-3fccafc27979c79ac253d8b14f64641e90c91403adadc5b2f7b266e413891859.png); }
.feeling_score-1{ background-image: url(/assets/smiling-face-with-smiling-eyes-543c8b631fffb1523c3ad4e2235bf89d1e3cd83ea98e128086b18a08d5f96af5.png); }
.feeling_score_transparent-0{ background-image: url(/assets/woman-shrug-transparent-0a64cfdec6ba1f6df45afc49ed15467630c694efa5ca69ea0f8a27202bc7e354.png); }
.feeling_score_transparent-1{ background-image: url(/assets/slightly-smiling-face-transparent-4a41ea913565b55a2bc6c2d52bc038bd4d122fb00df06407b49375f97772d07d.png); }
.feeling_score_transparent--1{ background-image: url(/assets/frowning-face-transparent-a77df642af24d801bcc965394570982cd93d6ef1e51345c5f3384d876a943da6.png); }

.feelings-check-selector input:active +.feeling_level-label{opacity: .9;}
.feelings-check-selector input:checked +.feeling_level-label{
  border: 4px solid #D777E2;
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.feeling_level-overview {
    border: 4px solid transparent;
    border-radius: 15px;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width: 44px;
    height: 44px;
}
.feeling_level-icon {
    border: 4px solid transparent;
    border-radius: 15px;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width: 30px;
    height: 30px;
}
.feeling_level-label {
    border: 4px solid transparent;
    border-radius: 15px;
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:66px;
    height:66px;
}
.feeling_level-label:hover{
    -webkit-filter: brightness(1.1) grayscale(.25) opacity(.9);
       -moz-filter: brightness(1.1) grayscale(.25) opacity(.9);
            filter: brightness(1.1) grayscale(.25) opacity(.9);
}
/*
 * example
 *
 * <div class="my-5 slider" data-controller="slider">
 *   <label class="font-semibold" for="mindfulness_check_vibe">Money vibe check</label>
 *   <input class="w-full cursor-pointer" min="1" max="5" type="range" value="4" name="mindfulness_check[vibe]" id="mindfulness_check_vibe">
 *   <output class="bubble" for="mindfulness_check[vibe]" style="left: 73%;">4</output>
 * </div>
 */
.slider {
  position: relative
}

.slider input[type=range] {
}

.slider label {
  display: block;
  /* ensure there is space for the number */
  padding-bottom: 1.5rem;
}

.slider .bubble {
  position: absolute;
  left: 49%;
  transform: translateY(-1.5rem);
}

.slider .aasbubble::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: red;
  top: -1px;
  left: 50%;
}
/*
 * 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.
 *


 */