/* Foundation button overrides */
.button{
  &.small{
    padding-top: .5rem;
    padding-bottom: .5rem;

    &.compact{
      padding-left: .5rem;
      padding-right: .5rem;
      letter-spacing: 0;
      white-space: nowrap;
    }
  }

  &.tiny{
    padding-top: .25rem;
    padding-bottom: .25rem;

    &.compact{
      padding-left: .25rem;
      padding-right: .25rem;
      letter-spacing: 0;
    }
  }

  &.button--right{
    float: right;
  }

  a{
    color: inherit;

    &:hover{
      text-decoration: none;
    }
  }
}

.button{
  position: relative;
  background-color: var(--primary);

  &.focus,
  &:focus{
    background-color: var(--primary);
    box-shadow: $button-shadow-focus;
    outline: $button-outline-focus;
    outline-offset: $button-outline-offset;
    filter: brightness($button-brightness-focus);
  }

  &.hover,
  &:hover{
    background-color: var(--primary);
    filter: brightness($button-brightness-hover);
    text-decoration: none;
  }

  &.active,
  &:active{
    filter: brightness($button-brightness-active);
  }

  &.disabled,
  &[disabled]{
    &,
    &:active,
    &:hover,
    &:focus{
      background-color: var(--primary);
    }
  }

  &.hollow{
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
    text-decoration: $button-hollow-underline;

    &.hover,
    &:hover,
    &.focus,
    &:focus{
      border-color: var(--primary);
      background-color: var(--primary);
      color: $white;
    }

    &.disabled,
    &[disabled]{
      &,
      &:active,
      &:hover,
      &:focus{
        background-color: transparent;
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: none;
        text-decoration: none;
      }
    }

    &.light{
      &.hover,
      &:hover,
      &.focus,
      &:focus{
        border-color: var(--primary);
        background-color: var(--primary);
        color: $white;
      }

      &.disabled,
      &[disabled]{
        &,
        &:active,
        &:hover,
        &:focus{
          border-color: $white;
          color: $white;
        }
      }
    }
  }

  &.secondary{
    @include button-hollow-variant(var(--secondary));
  }

  &.success{
    @include button-hollow-variant(var(--success));
  }

  &.alert{
    @include button-hollow-variant(var(--alert));
  }

  &.warning{
    @include button-hollow-variant(var(--warning));
  }

  &.clear{
    &.secondary,
    &.success,
    &.alert,
    &.warning{
      background-color: transparent;

      &.hover,
      &:hover,
      &.focus,
      &:focus{
        background-color: transparent;
      }
    }

    &.secondary{
      color: var(--secondary);
    }

    &.success{
      color: var(--success);
    }

    &.alert{
      color: var(--alert);
    }

    &.warning{
      color: var(--warning);
    }
  }
}

.progress-meter{
  background-color: var(--primary);
}

// Overwrite Foundation hover styles in hollow disabled buttons
.button.hollow:disabled:hover,
.button.hollow.disabled:hover{
  &.success{
    border-color: var(--success);
    color: var(--success);
  }

  &.alert{
    border-color: var(--alert);
    color: var(--alert);
  }

  &.warning{
    border-color: var(--warning);
    color: var(--warning);
  }
}

.button.light:not(.hollow){
  @include modifiers(
    color,
    (
      success: $white,
      secondary: $white,
    )
  );
}

.button.light.hollow{
  border-color: $white;
  color: $white;
}

// Button groups
.button-group--collapse{
  text-align: left;
  margin-bottom: 0;
  display: flex;

  > :last-child{
    flex: 1;
  }

  > :first-child,
  > :first-child *{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  > :last-child,
  > :last-child *{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  > :not(:first-child):not(:last-child),
  > :not(:first-child):not(:last-child) *{
    border-radius: 0;
  }

  &.no-gaps{
    .button{
      margin-right: 0;
    }
  }
}

// buttons layout
.buttons__row{
  @include flexgap(.5rem);
}

.buttons__column{
  @include flexgap(.5rem, column);
}

/* Extra buttons styles */

.button--shadow{
  $shadows: (
    primary: shade($primary, 50),
    secondary: shade($secondary, 50),
    success: shade($success, 50),
    warning: shade($warning, 50),
    alert: shade($alert, 50),
    muted: shade($muted, 50),
  );

  @include modifiers(background-color, $shadows){
    color: $white;
  }
}

.button--icon{
  display: flex;
  align-items: center;
  position: relative;

  .icon-wrap{
    position: absolute;
    left: 0;
    top: 0;
    padding: .85em;
    border-right: 1px solid $white;
    height: 100%;
    min-width: 3.5em;
    white-space: no-wrap;
    padding-right: 5px;

    .icon{
      margin: 0;
      vertical-align: bottom;
    }
  }

  .text-wrap{
    display: block;
    margin-left: 2rem;
  }

  .icon{
    margin: 0 2px;
  }

  &.hollow{
    .icon-wrap{
      border-right: 1px solid var(--primary);
    }

    &.secondary{
      .icon-wrap{
        border-right: 1px solid var(--secondary);
      }
    }
  }

  &.small{
    .icon-wrap{
      padding: .5rem;
      min-width: 2.5rem;
    }

    .icon{
      width: 12px;
      height: 12px;
    }
  }
}

.button--nomargin{
  margin: 0;
}

.button--frosted{
  background-color: rgba($white, .65);
  color: var(--primary);
}

.button--muted{
  background-color: $muted;

  &:hover{
    background-color: var(--secondary);
  }

  &.hollow{
    border-color: $muted;
  }
}

.button--sc{
  letter-spacing: .05em;
  font-weight: 600;
  text-transform: uppercase;

  &.hollow{
    letter-spacing: .01em;
  }

  &.large{
    font-size: 1rem;
  }
}

.button__info{
  text-transform: none;
  font-weight: normal;
  font-size: 80%;
  margin-top: .25rem;
  display: block;
}

.link{
  cursor: pointer;
  color: $anchor-color;
  font-weight: 600;

  &:hover{
    color: $anchor-color-hover;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }
}

.link-alt{
  cursor: pointer;
  color: $anchor-color;

  &:hover{
    color: $anchor-color-hover;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }
}

.muted-link{
  font-weight: 600;
  color: $muted;

  &:hover{
    color: $anchor-color;
    text-decoration: underline;
  }
}

.show-more{
  text-align: center;
  margin-bottom: $margin-s;
}

/* Social buttons */

.button--social{
  position: relative;
  padding: 0 1.5rem 0 0;
  text-align: left;
  display: block;
  min-width: 250px;

  &::after{
    content: "";
    clear: both;
  }
}

.button--social__icon,
.button--social__text{
  display: block;
  padding: .85em 1rem;
}

.button--social__icon{
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  vertical-align: middle;
  padding: .85em 1rem;
  border-right: 1px solid rgba(black, .075);
  margin-right: .5rem;
  min-width: 3rem;
  text-align: center;
}

.button--social--mini .button--social__icon{
  position: relative;
}

.button--social__text{
  margin-left: 3rem;
}

.button--twitter{
  background-color: var(--twitter);

  &:hover{
    background-color: var(--twitter);
    filter: brightness(90%);
  }
}

.button--facebook{
  background-color: var(--facebook);

  &:hover{
    background-color: var(--facebook);
    filter: brightness(90%);
  }
}

.button--google{
  background-color: var(--google);
  font-family: Roboto;

  &:hover{
    background-color: var(--google);
    filter: brightness(90%);
  }

  .button--social__icon{
    padding: 0;

    svg.icon{
      fill: inherit;
      width: inherit;
      height: inherit;
      margin-top: 2px;

      /*
       * This is a hack to comply with google guidelines
       * https://developers.google.com/identity/branding-guidelines
       * Currently the icons.svg file have the wrong google icon, until that's fixed
       * google icon can be specified in secrets.yml with icon_path: decidim/brands/google.svg
       * however to facilitate upgrades this provides a fallback
       */
      max-width: 42px;
      max-height: 42px;

      &.icon--google{
        > use{
          display: none;
        }

        background-image: image-url("decidim/brands/google.svg");
      }
    }
  }

  &.button--social--mini{
    .button--social__icon{
      font-size: 0;
      min-width: auto;
      padding: 0;

      svg.icon{
        margin: 1px;
      }
    }
  }
}