@use '../vars';

.pushButton {
  border-radius: 4px;
  background: none;
  border: 1px solid var(--dx-bg-color--highlight);
  transition: 0.2s;

  input.control {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  span.content {
    display: flex;
    padding: 8px 12px;
    border-radius: 4px;
    user-select: none;

    span.text {
      margin-left: 6px;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
    }
  }

  input.control:checked + span.content {
    background: var(--dx-bg-color--highlight);
  }

  input.control:focus + span.content {
    outline: var(--dx-fg-accent-color) solid 1px;
  }

  &.enabled {
    border-radius: 4px;
    border-color: var(--dx-bg-color--separator);
    color: var(--dx-fg-color--dimmed);

    &:hover {
      color: var(--dx-fg-color);
    }

    span.content {
      cursor: pointer;
    }
  }

  &.disabled {
    color: var(--dx-bg-color--separator);
    border-color: var(--dx-bg-color);
  }
}

@media (max-width: vars.$media-small) {
  .pushButton {
    span.text {
      display: none;
    }
  }
}
