/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

:root {
  --icon-button-small-size: 32px;
  --icon-button-default-size: 40px;
  --icon-button-large-size: 54px;
  --icon-button-background-color: #fff;
  --icon-button-default-color: rgb(178, 178, 178);
  --icon-button-hover-color: var(--color-primary);
  --icon-button-flat-color: rgb(178, 178, 178);
  --icon-button-flat-color-hover: #fff;
  --icon-button-flat-hover-background-color: rgb(150, 150, 150);
  --icon-button-flat-border-width: 1px;
  --icon-button-flat-small-size: var(--icon-button-small-size);
  --icon-button-flat-default-size: var(--icon-button-default-size);
  --icon-button-flat-large-size: var(--icon-button-large-size);
}

.container {
  all: initial;
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  transition: all var(--default-transition-duration) ease;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  border: 0;

  /* flexbox fix for safari */
  /* based on http://stackoverflow.com/a/40483475/1661138 */
  &::before,
  &::after {
    content: '';
    flex: 1 1 auto;
    @mixin flex-fix;
  }
}

.fix {
  /* flexbox fix for safari */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.icon {
  cursor: inherit;
  transition: all var(--default-transition-duration) ease;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.7;

  &.defaultStyle {
    background-color: var(--icon-button-background-color) !important;
    box-shadow: inset 0 0 0 1px color-mod(#000 alpha(20%)),
      0 1px 2px 0 color-mod(#000 alpha(10%)) !important;

    & .icon {
      color: var(--icon-button-default-color) !important;
    }
  }

  &.flat {
    background-color: transparent !important;
    box-shadow: inset 0 0 0 var(--icon-button-flat-border-width)
      var(--icon-button-flat-color) !important;

    & .icon {
      color: var(--icon-button-flat-color) !important;
    }
  }
}

.active {
  & .icon {
    color: var(--icon-button-hover-color) !important;
  }
}

/* Styles */
.defaultStyle {
  background-color: var(--icon-button-background-color);
  box-shadow: inset 0 0 0 1px color-mod(#000 alpha(20%)),
    0 1px 2px 0 color-mod(#000 alpha(10%));

  & .icon {
    color: var(--icon-button-default-color);
  }

  &:hover,
  &:focus {
    box-shadow: inset 0 0 0 1px color-mod(#000 alpha(30%)),
      0 2px 4px 0 color-mod(#000 alpha(25%));

    & .icon {
      color: var(--icon-button-hover-color);
    }
  }

  &:active {
    box-shadow: inset 0 0 0 1px color-mod(#000 alpha(30%)),
      0 1px 1px 0 color-mod(#000 alpha(25%));

    & .icon {
      color: var(--icon-button-hover-color);
    }
  }
}

/* Sizes */
.small {
  &.defaultStyle {
    width: var(--icon-button-small-size);
    height: var(--icon-button-small-size);
  }

  &.flat {
    width: var(--icon-button-flat-small-size);
    height: var(--icon-button-flat-small-size);
  }
}

.normal {
  &.defaultStyle {
    width: var(--icon-button-default-size);
    height: var(--icon-button-default-size);
  }

  &.flat {
    width: var(--icon-button-flat-default-size);
    height: var(--icon-button-flat-default-size);
  }
}

.large {
  &.defaultStyle {
    width: var(--icon-button-large-size);
    height: var(--icon-button-large-size);
  }

  &.flat {
    width: var(--icon-button-flat-large-size);
    height: var(--icon-button-flat-large-size);
  }
}

/* Themes */
.flat {
  &.default {
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--icon-button-flat-border-width)
      var(--icon-button-flat-color);

    & .icon {
      color: var(--icon-button-flat-color);
    }

    &:hover,
    &:focus {
      background-color: var(--icon-button-flat-hover-background-color);
      box-shadow: inset 0 0 0 var(--icon-button-flat-border-width)
        var(--icon-button-flat-hover-background-color);

      & .icon {
        color: var(--icon-button-flat-color-hover);
      }
    }

    &:active {
      background-color: color-mod(
        var(--icon-button-flat-hover-background-color) shade(5%)
      );

      & .icon {
        color: var(--icon-button-flat-color-hover);
      }
    }
  }

  &.primary {
    background-color: var(--color-primary);

    & .icon {
      color: var(--icon-button-flat-color-hover);
    }

    &:hover,
    &:focus {
      background-color: color-mod(var(--color-primary) tint(10%));
    }

    &:active {
      background-color: color-mod(var(--color-primary) shade(5%));
    }
  }

  &.success {
    background-color: var(--color-success);

    & .icon {
      color: var(--icon-button-flat-color-hover);
    }

    &:hover,
    &:focus {
      background-color: color-mod(var(--color-success) tint(10%));
    }

    &:active {
      background-color: color-mod(var(--color-success) shade(5%));
    }
  }

  &.danger {
    background-color: var(--color-danger);

    & .icon {
      color: var(--icon-button-flat-color-hover);
    }

    &:hover,
    &:focus {
      background-color: color-mod(var(--color-danger) tint(10%));
    }

    &:active {
      background-color: color-mod(var(--color-danger) shade(5%));
    }
  }

  &.info {
    background-color: var(--color-info);

    & .icon {
      color: var(--icon-button-flat-color-hover);
    }

    &:hover,
    &:focus {
      background-color: color-mod(var(--color-info) tint(10%));
    }

    &:active {
      background-color: color-mod(var(--color-info) shade(5%));
    }
  }

  &.warning {
    background-color: var(--color-warning);

    & .icon {
      color: var(--icon-button-flat-color-hover);
    }

    &:hover,
    &:focus {
      background-color: color-mod(var(--color-warning) tint(10%));
    }

    &:active {
      background-color: color-mod(var(--color-warning) shade(5%));
    }
  }
}