@import (reference) "../variables/legacy-variables.less";
@import (reference) "./mixins/_logical-properties.less";

/**
 * DEPRECATED: use <Circle /> component instead
 */

@circle-xs-diameter: 24px;
@circle-sm-diameter: 48px;
@circle-md-diameter: 72px;
@circle-lg-diameter: 96px;

@circle-xs-font-size: 10px;
@circle-sm-font-size: 16px;
@circle-md-font-size: 24px;
@circle-lg-font-size: 32px;

@circle-xs-icon-size: 14px;
@circle-sm-icon-size: 24px;
@circle-md-icon-size: 32px;
@circle-lg-icon-size: 40px;

@circle-inverse-bg: var(--color-background-neutral);

.circle-variant(@diameter; @font-size; @icon-size) {
  font-size: @font-size;
  width: @diameter;
  height: @diameter;
  line-height: @diameter;
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-primary);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid transparent;
  background-color: #fff;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  transition:
    background-color ease @transition-duration,
    border-color ease @transition-duration,
    color ease @transition-duration;

  &.active {
    border-color: var(--color-interactive-accent-active);
    background-color: var(--color-interactive-accent-active);
  }

  img {
    width: 100%;
    border-radius: 50%;
    vertical-align: initial;
  }

  img& {
    background-color: transparent;
    border-radius: 50%;
  }

  &[style] {
    border: 0;
    border-radius: 50% !important;
  }

  a& {
    &[style]:hover {
      border: 1px solid var(--color-interactive-accent);
    }
  }

  .navbar-nav > li > a & {
    width: @navbar-line-height;
    height: @navbar-line-height;
    line-height: @navbar-line-height;

    .icon {
      line-height: @navbar-line-height;
    }
  }
}

.circle,
.circle-sm {
  .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
}

.circle-xs {
  .circle-variant(@circle-xs-diameter, @circle-xs-font-size, @circle-xs-icon-size);
}

.circle-md {
  .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
}

.circle-lg {
  .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
}

a.circle,
a.circle .icon {
  text-decoration: none;
}

a:hover .circle,
a.circle:hover {
  border-color: var(--color-interactive-accent);
  color: var(--color-content-accent);
  text-decoration: none;
}

a:hover .circle.active,
a.circle.active:hover {
  text-decoration: none;
  color: #fff;
}

/* TODO this could be tidier, ideally change the general link behaviour */

.dropdown-menu li a:hover .circle {
  background-color: var(--color-background-screen);
  border-color: #fff;
  color: var(--color-content-primary);
}

.dropdown-menu .disabled a:hover .circle {
  background-color: @circle-inverse-bg;
  border-color: transparent;
}

.circle-inverse {
  background-color: @circle-inverse-bg;
}

.circle-responsive {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  width: var(--size-24);
  height: var(--size-24);
  line-height: var(--size-24);
  font-size: @circle-sm-font-size;
  overflow: visible;

  .icon {
    font-size: @circle-sm-icon-size;
    line-height: @circle-sm-icon-size;
  }

  &.circle-lg {
    border-radius: 50%;
    background-color: #fff;

    &.circle-inverse {
      background-color: var(--color-background-neutral);
    }
    .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
  }
}

@media (--screen-sm) {
  .circle-responsive {
    border-radius: 50%;
    background-color: #fff;

    &.circle,
    &.circle-sm,
    &.circle-md {
      .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
    }

    &.circle-lg {
      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
    }

    &.circle-inverse {
      background-color: var(--color-background-neutral);
    }
  }
}

@media (--screen-md-min) {
  .circle-responsive {
    &.circle-md {
      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
    }

    &.circle-lg {
      .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
    }
  }
}

.dropdown-menu {
  li,
  li > a {
    > .circle:first-child {
      .margin(right, var(--size-8));
    }

    > .circle-sm:first-child {
      .margin(right, var(--size-12));
    }
  }
}

.btn {
  .circle:first-child {
    .margin(right, var(--size-8));
  }

  .circle-sm:first-child {
    .margin(right, var(--size-12));
  }
}

.btn .circle .tw-icon,
.dropdown-menu li .circle .tw-icon {
  float: none;
  margin-top: 0;
  .margin(left, 0);

  .margin(right, 0);
}