.panel-station {
  $margin: $grid-unit-x * 4;

  width: ceil($grid-unit-x * 27.5);
  margin-right: $margin;
  margin-bottom: $margin;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  vertical-align: top;
  position: relative;
  border-radius: $border-radius-base * 6;
  padding: $grid-unit-y * 3 $grid-unit-x * 3;

  @include media-breakpoint-down(md) {
    padding: $grid-unit-y * 2 $grid-unit-x * 2;
  }

  @include media-breakpoint-down(md) {
    flex: 0 0 33%;
    max-width: calc(33% - #{$margin});
  }

  @include media-breakpoint-down(sm) {
    flex: 0 0 50%;
    max-width: calc(50% - #{$margin});
  }

  .panel-body {
    position: relative;
    padding-top: 0;
  }

  &.active,
  &:hover,
  &:focus {
    border-color: transparent;

    @include themes(background-color, panel-station-hover-bg);
    @include box-shadow-themes(box-shadow-new-hover);

    .panel-station-avatar {
      @include themes(border-color, panel-station-avatar-border-hover);
    }
  }

  &-container {
    margin-right: -$margin;
    margin-bottom: -$grid-unit-y * 3;

    @include media-breakpoint-down(md) {
      display: flex;
      flex-wrap: wrap;
    }
  }

  &-tools {
    position: absolute;
    top: -12px;
    right: -9px;
  }

  &-map {
    font-size: $font-size-small;
    line-height: $grid-unit-y * 2;
    font-family: $font-family-proxima;

    @include themes(color, color-new-body-dark);
    @include text-overflow();
  }

  &-icon {
    text-align: center;
    margin-bottom: $padding-base-vertical;

    .avatar {
      font-size: $font-size-h2;

      @include avatar-xl(true);
    }
  }

  &-avatars {
    margin-right: 0;
    padding-left: $grid-unit-x * 0.5;
    margin-bottom: $grid-unit-y * 2;

    @include text-overflow();
    text-overflow: clip;

    &-item {
      margin-right: $grid-unit-x * 0.5;
      display: inline-block;
    }

    &-spacer {
      height: $avatar-xs;
    }
  }

  &-title {
    font-size: $font-size-h4;
    font-weight: $font-weight-medium;
    line-height: $grid-unit-y * 3.5;

    @include themes(color, color-new-heading);

    @include text-overflow();

    @include media-breakpoint-down(md) {
      font-size: $font-size-large;
    }
  }

  &-caption {
    font-family: $font-family-base;
    font-weight: $font-weight-regular;
    font-size: $font-size-base;
    line-height: $grid-unit-y * 3;
    margin-bottom: $grid-unit-y * 2;

    @include themes(color, color-new-body-dark);
  }

  &-counter {
    @include themes(color, color-new-body-dark);

    .fa {
      margin-right: $grid-unit-x;
      vertical-align: -7%;

      @include themes(color, color-new-body-light);
    }
  }

  &-icons {
    @include themes(color, color-new-body-light);

    .fa {
      display: inline-block;
      margin-left: $grid-unit-x;
    }
  }

  &-label .label {
    @include label-lg();
  }

  &-bottom {
    margin-top: $grid-unit-y * 5;
  }

  // With Border
  &-with-border {
    @include themes-border(color-new-border);

    &,
    &.active,
    &:hover,
    &:focus {
      @each $theme, $map in $themes {
        .#{$theme} & {
          @include box-shadow(none);
        }
      }
    }

    &.active {
      @include themes-value(border-color, $brand-primary);
    }
  }
}