$gray: #c5c5c5;
$darkGray: gray;
$border: 1px solid $gray;

:host {
  position: relative;
  display: flex;
  flex-flow: row;

  input {
    flex: 1;

    padding: 4px 8px;

    background: transparent;
    border: $border;
    border-radius: 3px;

    transition: border-color 0.2s ease;

    &.borderless {
      border: none;
    }

    &:focus-visible {
      border-color: $darkGray;
      outline: none;
    }
  }

  button {
    cursor: pointer;
    user-select: none;

    flex: 0 1 auto;

    margin-left: -26px;

    opacity: 0.7;
    background: none;
    border: none;

    transition: opacity 0.2s ease;

    &:hover {
      opacity: 1;
    }
  }
}