:host {
  @apply grid grid-cols-8 box-border items-center pt-2 pr-4;
}

a {
  @apply flex flex-row items-center justify-center py-2 px-4 no-underline border-2 border-solid font-bold text-lg whitespace-nowrap;
  border: 1px solid #aeb7c1;
  border-radius: 5px;

  &.task-nav {
    width: 141px;
  }

  &.calendar-nav {
    min-width: 188px;
    max-width: 204px;
  }

  ui-icon {
    @apply ml-2;
    color: #596470;
  }
}

button {
  @apply grid grid-flow-col items-center py-2 px-4 outline-none font-bold rounded-lg text-lg;

  &.today {
    border: 1px solid #aeb7c1;
    border-radius: 5px;
  }
}

.nav-wrapper {
  @apply grid grid-flow-col items-center col-span-7;
}

.display-year-month {
  @apply flex flex-row items-center justify-center text-center font-bold whitespace-nowrap text-h3;
  width: 200px;
}

.prev,
.next {
  @apply grid justify-center w-12 h-8;
  color: #596470;
  background: #ffffff;
  box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);
  border-radius: 5px;
}

.prev {
  @apply rotate-180 transform;
}
