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

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

:root {
  --toolbar-info-button-size: 24px;
  --toolbar-info-button-color: #999;
  --toolbar-info-button-color-hover: #666;
  --toolbar-info-button-color-active: #4c4c4c;
  --toolbar-info-button-active-background-image: linear-gradient(
    -36deg,
    #7103cd 0%,
    #2c00b4 100%
  );
}

/* Styles */
.container {
  all: initial;
  display: inline-flex;
  width: var(--toolbar-info-button-size);
  height: var(--toolbar-info-button-size);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  flex-flow: row;
  align-content: center;
  align-items: center;
  /*transition: all var(--default-transition-duration) ease-in-out;*/
}

.icon {
  width: 4px;
  height: 12px;
  flex: 0 0 auto;
  /*transition: all var(--default-transition-duration) ease-in-out;*/
}

.outline {
  box-shadow: inset 0 0 0 2px var(--toolbar-info-button-color);

  & .icon {
    fill: var(--toolbar-info-button-color);
  }

  &:hover {
    box-shadow: inset 0 0 0 2px var(--toolbar-info-button-color-hover);

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

  &:active {
    box-shadow: inset 0 0 0 2px var(--toolbar-info-button-color-active);

    & .icon {
      fill: var(--toolbar-info-button-color-active);
    }
  }
}

.active {
  background-image: var(--toolbar-info-button-active-background-image);
  /*box-shadow: inset 0 1px 0 0 color-mod(#000 alpha(20%)), 0 0 0 0 color-mod(#000 alpha(25%));*/

  & .icon {
    fill: #fff;
  }

  &:hover {
    box-shadow: inset 0 0 0 0 color-mod(#000 alpha(20%)),
      0 1px 1px 0 color-mod(#000 alpha(25%));
    opacity: 0.9;
  }

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