/*! UIkit 2.20.3 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
/* ========================================================================
   Component: Dotnav
 ========================================================================== */
/*
 * 1. Gutter
 * 2. Remove default list style
 */

.uk-dotnav {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  /* 1 */
  margin-left: -15px;
  margin-top: -15px;
  /* 2 */
  padding: 0;
  list-style: none;
  > * {
    /* 1 */
    -ms-flex: none;
    -webkit-flex: none;
    flex: none;
    /* 2 */
    padding-left: 15px;
    margin-top: 15px;
  }
  &:before {
    content: "";
    display: block;
    overflow: hidden;
  }
  &:after {
    content: "";
    display: block;
    overflow: hidden;
    clear: both;
  }
  > {
    * {
      float: left;
      > {
        * {
          display: block;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: rgba(50, 50, 50, 0.1);
          /* 1 */
          text-indent: 100%;
          overflow: hidden;
          white-space: nowrap;
        }
        :hover, :focus {
          background: rgba(50, 50, 50, 0.4);
          /* 2 */
          outline: none;
        }
        :active {
          background: rgba(50, 50, 50, 0.6);
        }
      }
    }
    .uk-active > * {
      background: rgba(50, 50, 50, 0.4);
    }
  }
}

/*
 * 1. Space is allocated solely based on content dimensions
 * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied
 */

/*
 * DEPRECATED IE9 Support
 */

/* Items
 ========================================================================== */
/*
 * Items
 * 1. Hide text if present
 */

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 */

/* OnClick */

/* Active */

/* Modifier: `uk-dotnav-contrast`
 ========================================================================== */

.uk-dotnav-contrast > {
  * > {
    * {
      background: rgba(255, 255, 255, 0.4);
    }
    :hover, :focus {
      background: rgba(255, 255, 255, 0.7);
    }
    :active {
      background: rgba(255, 255, 255, 0.9);
    }
  }
  .uk-active > * {
    background: rgba(255, 255, 255, 0.9);
  }
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 */

/* OnClick */

/* Active */

/* Modifier: 'uk-dotnav-vertical'
 ========================================================================== */
/*
 * DEPRECATED
 */

.uk-dotnav-vertical {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  > * {
    float: none;
  }
}

/*
 * DEPRECATED IE9 Support
 */