@charset "UTF-8";
@import "../../../../../lib/craftcms-sass/mixins";

#routes {
  margin: 0 1px 25px;
}

.route {
  @include pane;
  position: relative;
  margin: 15px 0;
  padding: 0;
  border-radius: 2px;
  background-image: linear-gradient(#fafafa, #f3f3f3);
  cursor: pointer;
}

.route:hover:after {
  position: absolute;
  top: 9px;
  @include right(5px);
  @include icon;
  content: 'edit';
  color: $linkColor;
}

.route .uri-container,
.route .template {
  padding: 7px 14px;
  line-height: 18px;
  min-height: 18px;
}

.route .uri-container {
  position: relative;
  @include margin-right(20px);
  @include padding-right(10px);
  @include border-radius(2px, 0, 0, 2px);
  @include floatleft;
  color: $linkColor;
  background: #fff;
}

.route .uri-container:after {
  display: block;
  content: '.';
  text-indent: -100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  @include right(-15px);
  width: 15px;
  height: 32px;
  background-repeat: no-repeat;
  body.ltr & {
    background-image: url(images/route-bg.png);
  }
  body.rtl & {
    background-image: url(images/route-bg_rtl.png);
  }
}

.route .uri-container .site {
  display: inline-block;
  @include margin(-1px, 8px, -1px, 0);
  border-radius: 3px;
  padding: 1px 5px;
  background: hsl($hue, 15%, 95%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  color: $mediumTextColor;
}

.route .uri-container .uri .token {
  margin: 0 2px -1px;
}

.route .template {
  color: $mediumTextColor;
}

.route .template:before {
  @include icon;
  @include margin(0, 5px, 0, 0);
  content: 'template';
}

.modal.route-settings {
  width: 500px;
}

.modal.route-settings .body {
  height: calc(100% - 130px);
  overflow: auto;
}

.modal.route-settings .body .uri {
  width: auto;
  cursor: text;
}

.modal.route-settings .body .uri .token {
  cursor: default;
}

.route-settings .uri-tokens {
  margin-top: 10px;
  border-radius: 5px;
  padding: 15px 25px;
  background: #fafafa;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.route-settings .uri-tokens h4 {
  margin-bottom: 5px;
  text-align: center;
}

.route-settings .uri-tokens .token {
  @include margin(5px, 5px, 0, 0);
  cursor: pointer;
}

.route-settings .delete {
  display: block;
  @include floatleft;
  margin-top: 7px;
  color: $red;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
  .route .uri-container:after {
    background-size: 15px 32px;
    body.ltr & {
      background-image: url(images/route-bg_2x.png);
    }
    body.rtl & {
      background-image: url(images/route-bg_rtl_2x.png);
    }
  }
}