@layer kz-components {
  /*
  Chrome has a bug where `contenteditable` elements receive focus from external clicks.
  This (in combination with the invisible character ​) creates boundaries
  for the element.
  https://stackoverflow.com/a/34445203
  */
  .timeSegmentWrapper {
    white-space: nowrap;
  }

  .timeSegment {
    display: block;
    text-align: end;
    background-color: var(--color-gray-300);
    border-radius: 3px;
    color: var(--color-purple-800);

    &:hover {
      background-color: var(--color-white);
    }

    &:focus-visible {
      color: var(--color-white);
      background: var(--color-blue-500);
      outline: none;
    }
  }

  .hasPadding {
    padding: 0 4px;
  }

  .placeholder {
    color: rgb(var(--color-purple-800-rgb), 0.7);
  }

  .literal {
    background: none;

    &:hover {
      background: none;
    }
  }

  .dayPeriod {
    margin-right: 4px;
  }
}