@use '../variables';

window.Bar {
  .datetime-bar {
    border: none;
    margin: 0;
    padding: 0;

    .clock-time {
      font-size: 12px;
      line-height: 0;
      font-weight: 400;
      letter-spacing: 1px;
    }

    .clock-date {
      font-size: 12px;
      line-height: 0;
      font-weight: 400;
      font-family: variables.$font-monospace;
      letter-spacing: 0.5px;
    }

    .datetime-btn {
      font-family: variables.$font-monospace;
      background-color: rgba(variables.$bg-base, 0.7);
      border: none;
      box-shadow: none;
      min-height: 0;
      border-radius: 0;
      padding: 0 6px;
      margin: 0;

      &:focus{
        outline: none;
        border: none;
      }
      &:hover {
        background-color: rgba(variables.$bg-surface, 0.4);
      }
    }
  }

  .calendar-popover {
    background: transparent;
    padding: 0 20px;
    font-family: variables.$font-sans;

    > contents {
      padding: 0;
    }

    .calendar-widget {
      header {
        font-weight: bold;
        color: variables.$text-primary;
        border-bottom: 1px solid variables.$border-default;
      }

      .day-number {
        border-radius: 0;
        padding: 10px;
        font-size: 13px;
        color: variables.$text-secondary;

        &:checked {
          color: variables.$accent-primary;
          font-weight: bold;
          box-shadow: 0 3px 0 -1px variables.$accent-primary;
        }

        // marked + selected at the same time
        &:checked:selected {
          background: variables.$accent-primary;
          color: variables.$text-primary;
          box-shadow: 0 3px 0 -1px variables.$text-primary;
        }
        &:selected {
          background: rgba(variables.$accent-primary, 0.5);
        }

        &:hover {
          background-color: rgba(variables.$accent-primary, 0.3);
          color: variables.$text-primary;
        }
      }

      .other-month {
        color: rgba(variables.$text-secondary, 0.3);
      }
    }
  }
}