/* -------------------------------------------------- */
/*    Button
/* -------------------------------------------------- */

.m-button {
  $root: &;
  display: flex;
  flex-direction: column;

  &__inner {
    cursor: pointer;
    -webkit-appearance: none; // stylelint-disable
    border: 0;
    @include make-vr();
    align-self: flex-start;
    font-size: fs('ms0');
    color: c('white');
    line-height: 1;
    background-color: c('black', '50');
    text-decoration: none;
    border-radius: 3px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    padding: s(2) s(4);
    transition: all 0.25s ease('out-cubic');

    &:hover {
      color: c('white');
      background-color: c('black');
    }

    svg {
      fill: c('white');
    }

    #{$root}--full & {
      width: 100%;
    }

    #{$root}--left & {
      align-self: flex-start;
    }

    #{$root}--center & {
      align-self: center;
    }

    #{$root}--right & {
      align-self: flex-end;
    }

    #{$root}--secondary & {
      color: c('black', '60');
      font-size: fs('ms-1');
      background-color: c('black', '20');

      &:hover {
        color: c('black', '70');
        background-color: c('black', '30');
      }
    }
  }
}

