button:not(.initial),
.button
{
  font-family: $font;
  @extend .no-select;
  cursor: pointer !important;
  display: block;
  // width: 100%;
  padding: 1em;
  position: relative;
  border-radius: 4px;
  background-color: transparent;
  border: none;
  transition: background-color 0.5s ease;
  font-size: .8em;
  text-align: center;
  text-transform: uppercase;
  color: $gray-dark;
  // background: $white-dark;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover
  {
    color: $yellow;
  }

  svg
  {
    width: 1.5em;
    height: 1.5em;
    margin: -.5em 0 -.5em 0;
    position: relative;
    display: inline-block;
    transition: .2s;

    &:first-child:not(:last-child)
    {
      margin-right: .75em;
    }

    &:last-child:not(:first-child)
    {
      margin-left: .75em;
      margin-right: -.5em;
    }
  }

  &:not(.no-fill):not([class^="fill-"]):not([class*=" fill-"])
  {
    svg
    {
      polygon,
      path
      {
        fill: $gray-dark;
      }

      rectangle,
      circle,
      line
      {
        stroke: $gray-dark;
      }
    }

    &:hover svg path
    {
      fill: $yellow;
    }
  }

  &.green,
  &.yellow,
  &.blue,
  &.red,
  &.black,
  &.gray
  {
    color: white;

    &:not(.no-fill):not([class^="fill-"]):not([class*=" fill-"])
    {
      svg,
      &:hover svg
      {
        polygon,
        path
        {
          fill: white;
        }

        rectangle,
        circle,
        line
        {
          stroke: white;
        }
      }
    }
  }

  &.white,
  &.gray-light
  {
    background-color: $white-light;
    color: $black;

    &:hover
    {
      background: $white-dark;
    }

    &:not(.no-fill):not([class^="fill-"]):not([class*=" fill-"])
    {
      svg,
      &:hover svg
      {
        polygon,
        path
        {
          fill: $black;
        }

        rectangle,
        circle,
        line
        {
          stroke: $black;
        }
      }
    }
  }

  &.yellow
  {
    background-color: $yellow;

    &:hover
    {
      background-color: $yellow-dark;
    }
  }

  &.blue
  {
    background-color: $blue;

    &:hover
    {
      background-color: $blue-dark;
    }
  }

  &.green
  {
    background-color: $green;

    &:hover
    {
      background-color: $green-dark;
    }
  }

  &.red
  {
    background-color: $red;

    &:hover
    {
      background-color: $red-dark;
    }
  }

  &.gray
  {
    background-color: $gray;

    &:hover
    {
      background-color: $gray-dark;
    }
  }

  &.gray-light
  {
    background-color: $gray-light;
    color: $black;

    &:hover
    {
      background-color: $white-dark;
    }
  }

  &.black
  {
    background-color: $black;

    &:hover
    {
      background-color: black;
    }
  }

  &.primary
  {
    @extend .yellow;
  }

  &.secondary
  {
    @extend .blue;
  }

  &.warn
  {
    @extend .red;
  }

  &[disabled],
  &.disabled
  {
    cursor: no-drop !important;
    opacity: 0.3;

    &:hover
    {
      // background-color: inherit;

      svg path
      {
        fill: inherit !important;
      }
    }
  }

  &.outline
  {
    border: 2px solid $white-dark;
    background-color: transparent;

    &.bg-white
    {
      background-color: white;
    }

    &::not(.wide)
    {
      padding: calc(1em - 2px);
    }

    &:hover
    {
      border-color: $yellow;
    }

    &.yellow
    {
      border-color: $yellow;
      color: $yellow;

      &:hover
      {
        color: white;
        background-color: $yellow;
      }

      &:not(:hover):not(.no-fill):not([class^="fill-"]):not([class*=" fill-"]) svg path { fill: $yellow };
    }

    &.blue
    {
      border-color: $blue;
      color: $blue;

      &:hover
      {
        color: white;
        background-color: $blue;
      }

      &:not(:hover):not(.no-fill):not([class^="fill-"]):not([class*=" fill-"]) svg path { fill: $blue };
    }

    &.green
    {
      border-color: $green;
      color: $green;

      &:hover
      {
        color: white;
        background-color: $green;
      }

      &:not(:hover):not(.no-fill):not([class^="fill-"]):not([class*=" fill-"]) svg path { fill: $green };
    }

    &.red
    {
      border-color: $red;
      color: $red;

      &:hover
      {
        color: white;
        background-color: $red;
      }

      &:not(:hover):not(.no-fill):not([class^="fill-"]):not([class*=" fill-"]) svg path { fill: $red };
    }

    &.black
    {
      border-color: $black;
      color: $black;

      &:hover
      {
        color: white;
        background-color: $black;
      }

      &:not(:hover):not(.no-fill):not([class^="fill-"]):not([class*=" fill-"]) svg path { fill: $black };
    }

    &.gray
    {
      border-color: $gray;
      color: $gray;

      &:hover
      {
        color: white;
        background-color: $gray;
      }

      &:not(:hover):not(.no-fill):not([class^="fill-"]):not([class*=" fill-"]) svg path { fill: $gray };
    }
  }



  &.small
  {
    font-size: .6em;
  }

  &.large
  {
    font-size: .9em;
  }

  &.wide
  {
    padding-left: 4em;
    padding-right: 4em;
  }

  &.desktop\:wide
  {
    @include respond-to(desktop)
    {
      padding-left: 4em;
      padding-right: 4em;
    }
  }


  &.action
  {
    display: inline-block;
    border-radius: 100%;
    width: 4em;
    height: 4em;
    overflow: hidden;

    padding: 0.75em;

    svg
    {
      width: 2em;
      height: 2em;
    }

    svg
    {
      top: 0;
      margin: 0;
    }

    &.shadow
    {
      box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.2);
    }
  }

  // right-action-icon

  &[class^="embed-"],
  &[class*=" embed-"]
  {
    padding-right: 3rem;
    background-position: calc(100% - 1rem) center;
    background-size: .8em;
    background-repeat: no-repeat;
  }
}

.buttons
{
  &.action
  {
    width: 4em !important; // column overwrite width
    @extend .m-3;
    @extend .pin-br;
    @extend .fixed;
    @extend .column;
    @extend .v-center;
    @extend .h-center;

    button
    {
      @extend .action;

      &:not(:last-child)
      {
        @extend .hidden;
      }

      &:last-child
      {
        @extend .mt-1\/2;
        font-size: .9em;

        &:not([class])
        {
          background-color: $red;
          box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.2);

          svg polygon,
          svg path
          {
            fill: white;
          }
        }

      }
    }

    &:hover
    {
      button:not(:last-child)
      {
        @extend .block;
        font-size: .6em;
        background-color: $gray;
        @extend .mb-1;

        svg polygon,
        svg path
        {
          fill: white;
        }
      }
    }
  }

  &.concat
  {
    display: flex;

    > button,
    .button
    {
      &:first-child
      {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right-color: $gray-light;
      }
      &:last-child
      {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
      }
      &::not(:first-child)::not(:last-child)
      {
        border-radius: 0;
        border-left: 0;
      }
    }
  }
}