@use "../../styles/colors" as colors;
@use "../../styles/variables" as vars;

// Shared swap-cities button styling for every filter block. Mirrors Angular's
// `.change-container .button-change` in `online-board-route-filter.scss`
// byte-for-byte so the three filter sidebars render an identical 35×40 pill.
.change-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  .button-change {
    margin-top: vars.$space-m;
    margin-bottom: -(vars.$space-m);
    display: flex;
    align-items: center;
    justify-content: center;
    height: vars.$medium-button-height;
    width: 35px;
    background-color: colors.$white;
    border: none;
    box-shadow: none;
    cursor: pointer;

    &:hover {
      background-color: colors.$white;
    }
  }
}
