@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-large {
  padding: 14px 20px;
}

.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: $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;
  // display: flex;
  min-height: 32px;
  font-family: $font-pop;
  // opacity: 0.95; // new design has opaque map buttons?
  // background-color: $dark;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);

  // Can't apply these atm
  // due to (presumably https://bugs.chromium.org/p/chromium/issues/detail?id=375693)
  // display: grid;
  // grid-auto-flow: column;
  display: flex;
  flex-direction: row;
  justify-content: center;

  &:hover,
  &:focus,
  .is-open &,
  &.is-active {
    // background: $color-primary;
    text-decoration: none;
  }
  &:hover,
  &:focus {
    svg {
      // fill: $text-light;
    }
  }
  // overrides on panel.scss's .button
  // svg:not(:root) {
  // }
  svg {
    height: 15px;
    width: 15px;
    // opacity: 0.35;
    // margin: auto 5px auto 7px;
    vertical-align: middle;
    display: inline-block;

    margin: auto $padding-small;
    margin-left: $padding-small + 2px;
    margin-right: $padding-small - 2px;

    // fill: $text-light;
    // fill: #6487ae;
    // fill: $map-button-color;
  }

  span {
    // vertical-align: top;
    vertical-align: middle;
    margin: auto $padding-small + 1px;
  }
}

.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;
}