.page-options {
  min-height: 40px;
  max-width: var(--editor-max-width);
  display: flex;
  align-items: flex-end;
  margin: 0 auto;

  &__item {
    flex-grow: 1;
    font-size: 14px;

    ^&__short-description {
      display: block;
      text-overflow: ellipsis;
      background: transparent;
      padding-left: 5px;
      padding-bottom: 0;

      &:focus {
        background: transparent;
      }
    }

    ^&__event-date {
      width: 37.5%;
      background: transparent;
      color: transparent;
      text-shadow: 0 0 0 var(--color-gray);
      padding-bottom: 0;

      &:hover {
        text-shadow: 0 0 0 var(--color-hover);
        cursor: pointer;

        &::placeholder {
          text-shadow: 0 0 0 var(--color-hover);
        }

        + label {
          svg {
            color: var(--color-hover);
          }
        }
      }

      @media (--mobile) {
        width: auto;
        max-width: 150px;
      }

      /**
        Removes blinking cursor from input field
       */
      &::placeholder {
        color: transparent;
        text-shadow: 0 0 0 var(--color-gray);
      }

      &:focus {
        background: transparent;
      }

      + label {
        float: left;
        line-height: 1.275em;
        padding-top: 8px;
        padding-left: 7px;

        svg {
          color: var(--color-gray);
        }
      }
    }
  }
}