@import '~terriajs-variables';

$btn-setting-size: 35px;

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.btn {
  background-color: transparent;
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: $font-weight-normal;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  line-height: $btn-default-line-height;
  text-decoration: none;
  font-size: $font-size-button;
  font-family: $font-base;

  &:focus, &:hover {
    box-shadow: none;
    border-color: transparent;
    outline: none;
    opacity: 0.9;
  }
}

.btn-transparent {
  background: transparent;
  margin: 0;
}

.btn-small {
  padding: 0;
  &:hover, &:focus {
    color: $color-primary;
  }
}

.btn-primary {
  display: block;
  background: $color-primary;
  font-family: $font-pop;
  color: $text-light;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: $radius-small;
  padding: $padding;

  &:disabled {
    background: $color-primary-disabled !important;
    cursor: not-allowed;

    &:hover, &--hover {
      background: $color-primary-disabled !important;
    }
  }
  &:hover, &--hover {
    background: get-hover-color($color-primary);
  }
}

.btn-grey {
  padding: 0;
  font-size: $font-size-mini;
  text-align: center;
  width: 100%;
  line-height: 4;
  background: rgba(#fff, 0.15);
  border: 1px solid transparent;
  &:hover {
    border: $border-style;
  }
  &.is-active {
    background: $color-primary;
    border-color: $color-primary;
    color: $text-light;
  }
}

.btn--add-to-map {
  color: $color-primary;
}

.btn--secondary {
  color: $color-primary;
  border: 2px solid $color-primary;
  border-radius: 4px;

  &:hover, &:focus {
    border: 2px solid get-hover-color($color-primary);
    color: get-hover-color($color-primary);
  }
}

.btn--tertiary {
  background-color: $modal-bg;
  color: $modal-text;
  border: 2px solid $modal-text;
  border-radius: 4px;
  padding: 8px 10px;

  &:hover, &:focus {
    border: 2px solid $color-primary;
    color: $color-primary;
  }
}

.btn--tertiary-dark {
  color: $text-light;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  padding: 8px 10px;

  &:hover, &:focus {
    border: 1px solid $color-primary;
    color: $color-primary;
  }
}

.btn--remove-from-map {
  color: $color-primary;
}

.btn--loading-on-map {
  color: $color-primary;
}

.btn--close-modal {
  @extend .btn--secondary;

  font-size: $font-size-small;
  padding: 4px 10px;
  margin: 5px;
  font-weight: bold;
}


.btn--catalog {
  padding: $padding 30px+$padding;
  @media (min-width: $sm){
    padding: $padding-small 30px+$padding;
  }

  position: relative;
  width: 100%;
  font-weight: bold;
  .btn--group-indicator {
    position: absolute;
    left: 0;
    padding: $padding $padding*2.2 $padding $padding*1.5;
    @media (min-width: $sm){
      padding: $padding-small $padding*2.2 $padding-small $padding*1.5;
    }
    top: 0;
    font-size: $font-size-mid-large;
    opacity: 0.5;
  }
  &:before {
    position: absolute;
    right: 5px;
    top: $padding;
    @media (min-width: $sm){
      top: $padding-small;
    }

  }
  &:hover,
  &:focus {
    background: $modal-highlight;
    color: $text-light;
    .btn--group-indicator {
      color: $text-light;
    }
  }
}


.btn--catalog-item {
  position: relative;
  width: 100%;
  padding: $padding-small $padding*2.2 $padding-small $padding*1.5;

  &:focus, &:hover {
    color: $modal-highlight;
    &:before {
      opacity: 1;
    }
  }
  .is-previewed & {
    color: $modal-highlight;
    font-weight: $font-weight-bold;
    &:before {
      opacity: 1;
    }
  }
  &.is-active {
    color: $modal-highlight;
  }
}



.btn.btn--tab {
  border-right: 1px solid $modal-border;
  font-family: $font-pop;
  background: $modal-bg;
  color: $modal-text;
  font-size: $font-size-base;
  padding: $padding $padding*2;
  border-bottom: 2px solid transparent;
  li[aria-selected='true'] & {
    background: #fff;
    color: $modal-highlight;
  }
}


.btn--map {
  font-size: $font-size-small;
  padding: 5px;
  color: $text-light;
  display: block;
  min-height: 28px;
  font-family: $font-pop;
  opacity: 0.95;
  background-color: $charcoal-grey;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  line-height: 1.3;
  &:hover,
  &:focus,
  .is-open &,
  &.is-active {
    background: $color-primary;
    text-decoration: none;
  }
  svg{
    height: 15px;
    width: 15px;
    fill: $text-light;
    display: inline-block;
  }

  span{
    vertical-align: top;
    margin: 0 5px;
  }
}



.btn--search-clear {
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px;
}

.btn--radio {
  padding: $padding-small;
  &:before {
    color: $color-primary;
    display: inline-block;
    padding: $padding-small $padding-small $padding-small 0;
  }
}

//FIXME
.btn--small, ._buttons__btn-primary.btn--small {
  padding: 4px 9px;
  margin-right: 4px;
  font-size: $font-size-small;
}