@require "../common/variables.styl";
@require "../common/magic-theme.styl";

$li-border-radius = 5px;
$li-margin-bottom = 12px;

.tools2-container {

  .tools-button {
    position: absolute;
    top: 0;
    left: 0;
    width: $circle-button-width;
    height: $circle-button-width;
    border-radius: 50%;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color);
    color: var(--second-text-color);
    z-index: 9999;

    if (hexo-config('magic.enable') == true) {
      magic-style(1.1, 1.1);
    } else {
      border: 1px solid var(--border-color);
    }

    &:hover {
      transition();
      color: var(--background-color);
      background: var(--primary-color);
    }
  }


  .tools-wrapper {

    display: flex;
    align-items: center;
    justify-content: center;

    .tools-item {

      position: absolute;
      top: 0;
      left: ($circle-button-width - $tools-button-width) / 2;
      cursor: pointer;
      width: $tools-button-width;
      height: $tools-button-width;
      border-radius: $li-border-radius;
      font-size: 1.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--background-color);
      opacity: 0;

      &.hide {
        opacity: 0;
        transform: translate3d(0, 0, 0);
      }

      if (hexo-config('magic.enable') == true) {
        magic-style(1.1, 1.1);
      } else {
        border: 1px solid var(--border-color);
      }

      &:hover {
        transition();
        color: var(--background-color);
        background: var(--primary-color);
      }

      &.rss {

        a {
          border-radius: $li-border-radius;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;

          &:hover {
            transition();
            color: var(--background-color);
            background: var(--primary-color);
          }
        }
      }
    }


  }

}