.station-group {
  cursor: pointer;
  &.disabled {
    cursor: default;
  }

  .station-circle {
    transition: fill 0.2s ease-in-out;
    fill: #fff;
  }
  // color: red;
  &.complex-station {
    .arrow-path {
      fill: #b2bbc2;
      transition: fill 0.2s ease-in-out;
    }
    &:hover {
      .station-circle {
        fill: #5593ff;
      }
      .arrow-path {
        fill: #fff;
      }
    }
  }

  &.simple-station {
    .arrow-path {
      transition: fill 0.2s ease-in-out;
      fill: #276883;
    }
    &.disabled {
      .arrow-path {
        fill: gray;
      }
    }
    &:hover {
      &:not(.disabled) {
        .station-circle {
          fill: #c5d9fc;
        }
        .arrow-path {
          fill: #5593ff;
        }
      }
    }
  }
  .station-label-group {
    fill: #fff;
    &.disabled {
      .station-label {
        fill: gray;
      }
    }
    font-size: 16px;
    font-weight: 500;
    transition: fill 0.2s ease-in-out;
  }
  &:hover {
    &:not(.disabled) {
      .station-label-group {
        fill: #5593ff;
      }
    }
  }

  &.selected {
    .station-label-group {
      fill: #5593ff;
      text-decoration: underline;
      text-underline-offset: 2px;
      // outline: 2px dotted #5593ff;
      // outline-offset: 2px;
    }
  }
}
