@import '../variables/colors';
@import '../variables/sizes';
@import '../variables/mixins';

// CountrySelector
// --------------------------------------------------

@mixin country-selector-button($x-pos: center, $y-pos: center) {
  background: url($assetsDir + '/images/layout/data_library/country_selector.png') no-repeat $x-pos $y-pos;
  @include image-2x($assetsDir + "/images/layout/data_library/country_selector@2x.png", 40px, 40px, ($x-pos), ($y-pos));
}

.CountrySelector {
  margin-right: auto;
  margin-bottom: 30px;
  margin-left: auto;
  text-align: right;

  &.is-hidden {
    display: none;
  }
}

.CountrySelector-button {
  @include country-selector-button();
  display: inline-block;
  width: $sButton-height;
  height: $sButton-height;
  margin-left: 12px;
  border: $sButton-border solid $cNavButton-default;
  border-radius: $sButton-borderRadius;
  outline: none;
  text-align: center;
  vertical-align: middle;
}

.CountrySelector-button:hover {
  border-color: $cNavButton-active;

  .CountrySelector-icon {
    color: $cNavButton-active;
  }
}

.CountrySelector-text {
  display: inline-block;
  color: #FFF;
  font-size: $sFontSize-large;
  line-height: 40px;
}

.CountrySelector-text,
.CountrySelector-button {
  pointer-events: auto;
}

.CountrySelector-inner {
  pointer-events: none;
}