//pikaday is a JS plugin for date inputs

@use "variables" as *;

@use "color-tokens" as *;

@use "colors" as *;

@use "sass:color" as *;

.pika-single {
  font-family: $fonts;
  background-color: var(--mf-c-bg-section);
  padding: 1rem;

  abbr[title] {
    text-decoration: none;
  }
}

.pika-label {
  color: var(--mf-c-font-dark);
  font-size: $fonts-small;
}

.pika-table {

  th {
    color: var(--mf-c-font-dark);
    font-size: $fonts-xsmall;
  }
}

.pika-button {
  background-color: var(--mf-c-bg-section);
  color: var(--mf-c-font-base);
  font-size: $fonts-xsmall;
  font-weight: $fonts-normal;
  text-align: center;

  .is-today & {
    color: var(--mf-c-primary);
    font-weight: $fonts-bolder;

    &:hover {
      color: var(--mf-c-font-inverse);
    }
  }

  .is-disabled & {
    color: var(--mf-c-font-base);
    opacity: .5;
  }

  &:hover {
    background-color: mix($c-white, $c-primary, 50%);
    border-radius: 0;
  }

  .is-selected & {
    background-color: var(--mf-c-primary);
    box-shadow: none;
    border-radius: 0;
  }

  .is-today.is-selected & {
    color: var(--mf-c-font-inverse);
  }
}