@import "../colors.css";

.header {
  background-color: var(--color-primary) !important;
}

.button {
  color: var(--color-text-primary) !important;
}

.button:hover {
  background: var(--color-primary-hover) !important;
}

.ripple {
  background: var(--color-primary) !important;
}

.day.active > span {
  background: var(--color-primary) !important;
  color: var(--color-text-primary-on-primary) !important;
}

.input {
  position: relative;
}

.inputElement {
  color: var(--color-input-text-primary, var(--color-input-text));
  &:focus:not([disabled]):not([readonly]) {
    ~ .label:not(.fixed) {
      color: var(--color-primary);
    }
    ~ .icon {
      color: var(--color-primary);
    }
  }
}

.label, .icon {
  color: var(--color-input-label-primary, var(--color-input-label));
}

.hint {
  color: var(--color-input-label-primary, var(--color-input-label));
}

.date {
  font-size: 1.6rem;
  color: var(--color-text-primary-on-primary);
}

.year {
  color: var(--color-text-primary-on-primary);
}

.accent {
  .header {
    background-color: var(--color-secondary) !important;
  }
  
  .button {
    color: var(--color-input-text) !important;
  }
  
  .button:hover {
    background: var(--color-secondary-hover) !important;
  }
  
  .ripple {
    background: var(--color-secondary) !important;
  }
  
  .day.active > span {
    background: var(--color-secondary) !important;
    color: var(--color-text-secondary-on-secondary) !important;
  }
  
  .input {
    position: relative;
  }
  
  .inputElement {
    color: var(--color-input-text-secondary, var(--color-input-text));
    &:focus:not([disabled]):not([readonly]) {
      ~ .label:not(.fixed) {
        color: var(--color-secondary);
      }
      ~ .icon {
        color: var(--color-secondary);
      }
    }
  }
  
  .label, .icon {
    color: var(--color-input-label-secondary, var(--color-input-label));
  }
  
  .hint {
    color: var(--color-input-label-secondary  , var(--color-input-label));
  }

  .date {
    font-size: 1.6rem;
    color: var(--color-text-secondary-on-secondary);
  }
  
  .year {
    color: var(--color-text-secondary-on-secondary);
  }
}

.shrink .label {
  top: 0.6rem;
  font-size: 1.2rem;
}

.shrink .hint {
  display: block;
  opacity: 1;
}