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

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

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

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

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

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

  &:hover,
  &:focus{
    background-color: var(--primary);
    filter: brightness(120%);
  }

  &.hollow{
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
  }

  &.secondary{
    &:hover,
    &:focus{
      filter: brightness(120%);
    }

    &.hollow{
      background-color: transparent;
      color: var(--secondary);
      border-color: var(--secondary);
    }
  }
}

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

// Overwrite Foundation hover styles in hollow disabled buttons
.button.hollow:disabled:hover,
.button.hollow.disabled:hover{
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);

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

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

  .button{
    margin-right: 0;
  }

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

// 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 var(--secondary);
    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;
  }

  &.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{
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;

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

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

  &:hover{
    color: $anchor-color;
  }
}

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

/* Social buttons */

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

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

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