@appearhere/bloom/components/Calendar/DayRange/DayRange.css

Appear Here's pattern library and styleguide

.container {
  display: block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.btn,
.arrow {
  display: inline-block;
  vertical-align: middle;
}

.arrow {
  padding-left: var(--size-regular);
  padding-right: var(--size-regular);
  text-align: center;
  color: var(--color-grey);
}

.btn {
  position: relative;
  height: 100%;
  vertical-align: middle;
  padding-top: var(--size-sm-i);
  padding-bottom: var(--size-sm-i);
}

.value {
  color: var(--color-grey);
}

.placeholder {
  color: var(--color-greyLight);
}

.btn:after {
  content: '';
  position: absolute;
  display: block;
  width: calc(100% + 0.25rem);
  height: 2px;
  background-color: var(--color-greyDarker);
  bottom: -2px;
  left: -0.125rem;
  opacity: 0;
  transition: opacity 150ms var(--animation-sharp);
}

.btnActive {
  position: relative;
  z-index: calc(var(--z-stickyNode) + 1);
}

.btnActive .value,
.btnActive .placeholder {
  color: var(--color-greyDarker);
}

.btnActive:after {
  opacity: 1;
}