ujiro99/tlt

@import '../../css/mixin.css';

.react-calendar {
  @apply rounded-md;
  overflow: hidden;
}

.calendar {
  @mixin interactable;

  height: 62px;
  width: fit-content;
  padding: 2px 10px 8px;
  border-radius: var(--radius-md);

  &__label {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 28px;
    margin-top: 8px;
    color: var(--text-600);
    text-align: left;
    user-select: none;
    transition: all ease-out 0.2s;

    &--fixed {
      position: fixed;
      top: 7px;
      font-size: 16px;
      font-weight: normal;
      margin-top: 0;
      margin-left: -5px;
      padding: 5px 10px;
      border-radius: var(--radius-md);

      &:hover {
        background-color: var(--bg-gray-100);
      }
    }
  }

  &__button {
    position: relative;
    display: inline-block;
    margin-left: 6px;
  }

  &__icon {
    width: 20px;
    height: 20px;
    fill: var(--text-600);
  }

  &__label--fixed &__button {
    top: 3px;
  }

  &__label--fixed &__icon {
    width: 16px;
    height: 16px;
  }
}

.calendar-date {
  color: var(--text-600);
  text-align: left;
  font-family: var(--font-mono);
  font-weight: normal;
  font-size: 14px;
  letter-spacing: -0.05em;
}