/* Wrapper */
.wrapper {
  padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;

  @include breakpoint(laptop) {
    padding: $size-wrapper-pad-tb 0 ($size-wrapper-pad-tb - _size(element-margin)) 0;
  }

  @include breakpoint(tablet) {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
  }

  @include breakpoint(phablet) {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
  }

  @include breakpoint(mobileonly) {
    padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - _size(element-margin)) $size-wrapper-pad-lr;
  }

  &.style2 {
    background: _palette(accent1);

    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
      &:focus {
        border-color: _palette(border2);
      }
    }

    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    .button {
      &:hover,
      &:active {
        background-color: _palette(border-bg) !important;
        box-shadow: inset 0 0 0 1px _palette(border2) !important;
        color: _palette(fg-bold) !important;
      }

      &:active {
        background-color: _palette(border2-bg) !important;
      }

      &.special {
        background-color: _palette(fg-bold);
        color: _palette(accent1) !important;

        &:hover,
        &:active {
          background-color: _palette(border-bg) !important;
          box-shadow: inset 0 0 0 1px _palette(border2) !important;
          color: _palette(fg-bold) !important;
        }

        &:active {
          background-color: _palette(border2-bg) !important;
        }
      }
    }
  }

  &.fade-down {
    > .container {
      @include vendor('transform', 'translate(0,0)');
      @include vendor('transition', 'transform 1s ease, opacity 1s ease');

      opacity: 1;
    }

    &.inactive {
      > .container {
        @include vendor('transform', 'translate(0,-1em)');

        opacity: 0;
      }
    }
  }

  &.fade-up {
    > .container {
      @include vendor('transform', 'translate(0,0)');
      @include vendor('transition', 'transform 1s ease, opacity 1s ease');

      opacity: 1;
    }

    &.inactive {
      > .container {
        @include vendor('transform', 'translate(0,1em)');

        opacity: 0;
      }
    }
  }

  &.fade {
    > .container {
      @include vendor('transition', 'opacity 1s ease');

      opacity: 1;
    }

    &.inactive {
      > .container {

        opacity: 0;
      }
    }
  }
}