/*
Search

4 types of default buttons atoms

.has-black-color   - default button

Markup: ../../../../styleguide/templates/components/search.html

Style guide: Components.search

*/

/**
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
License: MIT.
*/

.canvi-c-search-field {

  display: inline-block;
  position: relative;
  width: 100%;

  &__input[type="text"],
  &__input[type="search"] {

    padding-right: 50px;
    width: 100%;


  }

  &__button {
    border: none;
    background: none;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 8px 14px;
    width: 60px;

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

    svg {
      fill: var(--global--color-text-base);
      min-width: 28px;

    }

    &:hover {
      svg {
        fill: var(--global--color-secondary-base);
      }
    }

  }

}

/*
Default Form
 */

.canvi-c-form,
.rocksite-c-form{

  width: 100%;


  &__line {

    width: 100%;
    margin-bottom: 30px;

    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    textarea{

      width: 100%;

    }

  }

}