initial

layers/ui/components/calendar/styles.scss

@@ -0,0 +1,140 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.ui-calendar {
+  display: inline-block;
+  width: fit-content;
+  background-color: var(--calendar-background);
+  color: var(--calendar-color);
+  padding: 16px 16px 24px 16px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+
+    i {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__title {
+    @include txt-i-sb;
+
+    text-transform: capitalize;
+  }
+
+  &__week-days,
+  &__days {
+    display: grid;
+    grid-template-columns: repeat(7, 32px);
+    color: var(--calendar-day-color);
+
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  &__week-days {
+    @include txt-s;
+
+    grid-auto-rows: 24px;
+    text-transform: capitalize;
+  }
+
+  &__days {
+    @include txt-i-m;
+
+    grid-auto-rows: 32px;
+  }
+
+  &__apply-button {
+    width: 100%;
+    margin-top: 16px;
+  }
+
+  &__cell {
+    transition: 0.2s ease-out;
+    transition-property: background-color;
+
+    &:not(&--period-start, &--period-end, &--period):hover {
+      background: var(--calendar-day-background-hover-color);
+      border-radius: 8px;
+    }
+    &--current-month {
+      color: var(--calendar-current-month-day-color);
+    }
+
+    &--current-day {
+      color: var(--calendar-today-color);
+    }
+
+    &--period {
+      background-color: var(--calendar-period-background);
+    }
+
+    &--period-start,
+    &--period-end {
+      border-radius: 8px;
+      position: relative;
+      color: var(--calendar-period-start-end-color);
+      z-index: 2;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        height: 100%;
+        z-index: -1;
+      }
+
+      &::before {
+        width: 50%;
+        background-color: var(--calendar-period-background);
+      }
+
+      &::after {
+        width: 100%;
+        background-color: var(--calendar-period-start-end-background);
+        border-radius: inherit;
+        left: 0;
+      }
+    }
+    &--period-start {
+      &::before {
+        right: 0;
+      }
+    }
+
+    &--period-end {
+      &::before {
+        left: 0;
+      }
+    }
+  }
+
+  /* prettier-ignore */
+  @include element-variant(
+                  'calendar',
+                  '',
+                  (
+                          'color': $clr-black,
+                          'background': $clr-white,
+                          'day-color': $clr-grey-500,
+                          'current-month-day-color': $clr-black,
+                          'today-color': $clr-cyan-500,
+                          'arrow-color': $clr-grey-600,
+                          'period-start-end-color': $clr-white,
+                          'period-start-end-background': $clr-cyan-500,
+                          'period-background': $clr-grey-100,
+                          'day-background-hover-color': $clr-grey-100
+                  )
+  );
+}