/*
Button Filled

4 types of default buttons atoms

.has-black-color   - default button
.has-text-base-color   - secondary button
.has-gray-base-color   - Success button
.has-gray-darken-color   - Warning button
.has-success-base-color   - Ghost version button
.has-black-background-color - next
.has-gray-base-background-color  - next
.has-primary-base-background-color  - next

Markup: ../../../../styleguide/templates/blocks/buttons-filled.html

Style guide: Blocks.buttons-filled

*/

/*
Button outlined

4 types of default buttons atoms

.-primary   - default button
.-secondary   - secondary button
.-success   - Success button
.-warning   - Warning button
.-ghost   - Ghost version button

Markup: ../../../../styleguide/templates/blocks/buttons-outlined.html

Style guide: Blocks.buttons-outlined

*/
.site .button,
.rocksite-a-button,
input[type="submit"],
input[type="reset"],
.wp-block-search__button,
.wp-block-button .wp-block-button__link {
  // Extend button style
  @include button-style();


  &.-outlined {
    background: none;
    border-color: var(--global--color-secondary);
    color: var(--global--color-secondary);

    &:hover {
      background-color: var(--button--color-background);


      color: var(--button--color-text);
    }

  }
}

.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search .wp-block-search__button,
.wp-block-file .wp-block-file__button {

  &:active {
    color: var(--button--color-text-active);
    background-color: var(--button--color-background-active);
  }

  &:hover {
    color: var(--button--color-text-hover);
    background: transparent;
  }
}

/*
Button Icon

4 types of default buttons atoms

.-large - larger version
.-outlined - Outlined button
.-rounded - ROunded button
.-outlined.-rounded - Outlined button and ROunded


Markup: ../../../../styleguide/templates/atoms/buttons-icon.html

Style guide: Atoms.buttons-icon
*/


.rocksite-a-button-icon {

  // Extend button style
  @include button-style();
  display: flex;
  width: 38px;
  height: 38px;
  padding: 4px;
  line-height: 0;
  justify-content: center;
  align-items: center;


  &.-rounded {
    border-radius: 100px;
    border: var(--button--border-width) solid var(--global--color-secondary);
  }

  &.-large {

    width: 44px;
    height: 44px;

  }

  &.-small {

    width: 28px;
    height: 28px;

  }

  &.-facebook {

    background: var(--global--color-facebook);
    border-color: var(--global--color-facebook);

    &:hover {

      background: var(--global--color-invert);

      svg {

        fill: var(--global--color-facebook);

      }
    }

  }

  &.-twitter {

    background: var(--global--color-twitter);
    border-color: var(--global--color-twitter);

    &:hover {

      background: var(--global--color-invert);

      svg {

        fill: var(--global--color-twitter);

      }
    }

  }

  &.-linkedin {

    background: var(--global--color-linkedin);
    border-color: var(--global--color-linkedin);

    &:hover {

      background: var(--global--color-invert);

      svg {

        fill: var(--global--color-linkedin);

      }
    }

  }

  &.-instagram {

    background: var(--global--color-instagram);
    border-color: var(--global--color-instagram);

    &:hover {

      background: var(--global--color-invert);

      svg {

        fill: var(--global--color-instagram);

      }
    }

  }

  &.-pinterest {

    background: var(--global--color-pinterest);
    border-color: var(--global--color-pinterest);

    &:hover {

      background: var(--global--color-invert);

      svg {

        fill: var(--global--color-pinterest);

      }
    }

  }

  &.-outlined {

    background: none;
    border-color: var(--global--color-secondary);

    svg {

      fill: var(--global--color-secondary);

    }

    &:hover {

      background-color: var(--global--color-secondary);

      svg {

        fill: var(--global--color-invert);

      }

    }

  }

  svg {
    display: block;
    fill: var(--global--color-invert);
  }

  &:hover {

    svg {
      display: block;
      fill: var(--global--color-secondary);
    }

  }

}

/**
 * Block Options
 */
.wp-block-button {

  // Target the default and filled button states.
  &:not(.is-style-outline) {

    .wp-block-button__link {

      &:active {
        color: var(--button--color-text-active) !important;
        background: transparent !important;
        border-color: var(--button--color-background);
      }

      &:hover {
        color: var(--button--color-text-hover);
        background: transparent;
        border-color: var(--button--color-background);
      }

      &:focus {
        outline: 1px dotted var(--button--color-background);
      }


      @each $variant in $variants {

        &.has-#{$variant}-background-color {

          &.has-background {


            border-color: var(--global--color-#{$variant});
            background: var(--global--color-#{$variant});

            &:hover {
              background: transparent !important; // in case gradient background
              color: var(--global--color-#{$variant});
            }

          }

        }

      }

      @each $variant in $variants {

        &.has-#{$variant}-color {

          &.has-text-color {

            color: var(--global--color-#{$variant});

            &:hover {

              color: var(--global--color-#{$variant});

            }

          }

        }

      }

      &.has-invert-color {

        &.has-text-color {

          &:hover {

            color: var(--global--color-text-base);

          }

        }

      }


    }


  }

  // Outline Style.
  &.is-style-outline,
  &.is-style-canvi-large-outline {

    .wp-block-button__link {
      padding: var(--button--padding-vertical) var(--button--padding-horizontal);

      &:not(.has-background) {
        background: transparent;
      }

      // Default version

      &:not(.has-background):not(.has-text-color) {
        background: transparent;
        color: var(--button--color-background);
        border-color: var(--button--color-background);

        &:active,
        &:hover {

          color: var(--global--color-invert);
          background: var(--global--color-secondary);
          border-color: var(--global--color-secondary);
        }

        &:focus {
          color: var(--button--color-background);
          background: transparent;
        }
      }


      .is-dark-theme & {

        &:not(.has-text-color) {

          &.has-background {
            color: var(--global--color-gray-darken);
          }

          &.has-background.has-gray-background-color,
          &.has-background.has-dark-gray-background-color,
          &.has-background.has-black-background-color {
            color: var(--global--color-invert);
          }
        }
      }

      &.has-background {

        &:hover {

          background: transparent !important; //in case gradient background

        }

      }

      &.has-text-color,
      &.has-background.has-text-color {
        border-color: currentColor;
      }


      @each $variant in $variants {

        &.has-#{$variant}-color {

          &.has-text-color {

            &:hover {

              color: var(--global--color-invert);
              background-color: var(--global--color-#{$variant});

            }

          }

        }

      }


    }

  }

  // is style large fill & large outline

  &.is-style-canvi-large-fill,
  &.is-style-canvi-large-outline {

    .wp-block-button__link {

      padding: 8px 44px;
      font-size: var(--button--font-size-large);
      line-height: var(--button--line-height);

    }


  }

  // Squared Style
  .is-style-squared .wp-block-button__link {
    border-radius: 0;
  }

}

.is-style-outline .wp-block-button__link[style*="radius"]:focus,
.wp-block-button a.wp-block-button__link[style*="radius"]:focus {
  outline-offset: 2px;
  outline: 2px dotted var(--button--color-background);
}


.wp-block-button {

  .wp-block-button {

    margin-bottom: var(--global--spacing-vertical-sm);

  }

  + .wp-block-button {

    @include media(mobile) {

      margin-left: var(--global--spacing-vertical-small);

    }

  }

}