@use './variables' as v;
@use '../../form/foundation';
@use '../../../components/base';
@use '../../../mixins/buttons';
@use '../../../mixins/utils';

a {
  color: base.$base-color;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  &:first-child {
    margin-top: 0;
  }
}

.message {
  padding: 20px;
  margin-bottom: 10px;

  width: 100%;
  border-radius: 5px;
  background: lighten(v.$color-message, 47%);
  color: v.$color-message;
  border: 1px solid lighten(v.$color-message, 20%);
  color: #777;
  > h4 {
    color: inherit;
    font-size: 1.2em;
    margin: 0;
    + p {
      margin-top: 4px;
    }
  }
  > p {
    color: inherit;
    margin: 0;
  }
  &.error {
    background: lighten(v.$color-error, 47%);
    color: v.$color-error;
    border-color: lighten(v.$color-error, 20%);
  }
  &.success {
    background: lighten(v.$color-success, 47%);
    color: v.$color-success;
    border-color: lighten(v.$color-success, 20%);
  }
}

@mixin button-color($color, $saturate: true) {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
  background-color: $color;
  $light-color: lighten($color, 17%);
  @if $saturate == true {
    $light-color: saturate($light-color, 13%);
  }
  background-image: linear-gradient($light-color, $color);
  border-color: darken($color, 7%);
}

@mixin button-color-darken($color) {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
  background-color: $color;
  //$dark-color: darken($color, 0%);
  background-image: linear-gradient(lighten($color, 8%), darken($color, 5%));
  border-color: darken($color, 12%);
}

$button-color-green: #60b044;
$button-color-cyan: adjust-hue($button-color-green, 60deg);
$button-color-purple: adjust-hue($button-color-green, 180deg);
$button-color-yellow: saturate(adjust-hue($button-color-green, -60deg), 20%);
$button-color-orange: lighten(saturate(adjust-hue($button-color-green, -80deg), 20%), 10%);
$button-color-red: v.$color-red;
//$button-color-red: saturate(lighten(adjust-hue($button-color-green, -100deg), 5%), 10%);

button,
.button {
  @include utils.wipe-button;
  @include buttons.size($font-size: 13px, $padding: 12px 20px, $border: 1px);
  display: inline-block;
  font-weight: bold;
  color: #333;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 3px;

  &.green {
    @include button-color($color: $button-color-green);
  }

  &.red {
    @include button-color($color: $button-color-red);
  }

  &.base,
  &.blue {
    $color: desaturate(lighten(base.$base-color, 20%), 45%);
    @include button-color($color: $color);
  }

  &.orange {
    @include button-color($color: $button-color-orange);
  }

  &:disabled {
    @include button-color($color: #bbb, $saturate: false);
    border-color: #ccc;
  }
}

div.controls {
  display: flex;
  flex: 0 0 auto;
}

button.icon,
.controls > .button,
.controls > button {
  &.hidden {
    display: none;
  }
  &:not(:disabled) {
    cursor: pointer;
  }
  flex: 0 0 foundation.$input-height;
  width: foundation.$input-height;
  height: foundation.$input-height;
  padding: 0;
  text-indent: -9999px;
  position: relative;
  &:not(:last-child) {
    margin-right: 5px;
  }
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }

  &[data-command='create'] {
    &:before {
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232.56%22%20height%3D%2240%22%20viewBox%3D%220%200%2032.559811%2040%22%3E%3Cpath%20d%3D%22M32.56%2031.1h-5.023v-5.024h-3.88V31.1h-5.02v3.877h5.02V40h3.88v-5.023h5.023V31.1zM15.023%2040H0V0h22.767l9.793%209.782v12.664h-3.884V12.21H20.34V3.882H3.883v32.233h11.14V40z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
      background-size: auto 24px;
    }
  }

  &[data-command='save'] {
    &:before {
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2241.2%22%20viewBox%3D%220%200%2040%2041.200001%22%3E%3Cpath%20d%3D%22M22.967%205.233h4.3V13h-4.3V5.233zM32.7%200H0v41.2h40V7.3L32.7%200zM9.45%203H29.8v12.2H9.45V3zm24.783%2034.933H5.767V21.967h28.466v15.966zM31.25%2026.65H8.75v-2h22.5v2zm0%202.3H8.75v2h22.5v-2zm0%204.3H8.75v2h22.5v-2z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
      background-size: 25px auto;
    }
  }

  &[data-command='edit'] {
    background-color: blue;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M23.983%2015.8V30H0V6.017h14.19l-2.914%202.91H2.91V27.09h18.162v-8.38l2.91-2.91zm-13.316-1.984l5.503%205.5-7.28%201.648%201.777-7.148zM30%205.666L17.893%2017.77l-5.67-5.668L24.33%200%2030%205.667z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
    background-size: 25px auto;
  }

  &[data-command='publish'] {
    &:before {
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20410.79999%20271.047%22%20height%3D%22271.047%22%20width%3D%22410.8%22%3E%3Cpath%20d%3D%22M410.8%20178.826c0%2050.852-41.37%2092.22-92.22%2092.22h-36.85v-40h36.847c28.794%200%2052.22-23.425%2052.22-52.22%200-35.412-23.816-53.746-49.18-53.844C320.317%2066.08%20280.983%2040%20242.957%2040c-50.31%200-70.975%2038.08-76.13%2052.662-20.51-29.582-76.18-7.248-64.643%2032.348C67.65%20118.748%2040%20144.748%2040%20178.826c0%2028.795%2023.427%2052.22%2053.222%2052.22h50.512v40H93.222C41.37%20271.046%200%20229.68%200%20178.826%200%20137.42%2027.56%20101.7%2066.153%2090.365c10.854-36.998%2049.784-58.686%2086.933-48.78C175.326%2015.286%20207.86%200%20242.956%200c57.116%200%20105.366%2040.816%20115.782%2095.777%2031.603%2015.203%2052.062%2047.135%2052.062%2083.05zm-271.648%2015.96h33.84v76.26h79.486v-76.26h33.84l-73.582-73.708-73.584%2073.708z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
      background-size: 25px auto;
    }
  }

  &[data-command='unpublish'] {
    &:before {
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20410.79999%20381.01599%22%20height%3D%22381.016%22%20width%3D%22410.8%22%3E%3Cpath%20d%3D%22M410.8%20178.826c0%2050.852-41.37%2092.22-92.22%2092.22h-36.85v-40h36.847c28.794%200%2052.22-23.425%2052.22-52.22%200-35.412-23.816-53.746-49.18-53.844C320.317%2066.08%20280.983%2040%20242.957%2040c-50.31%200-70.975%2038.08-76.13%2052.662-20.51-29.582-76.18-7.248-64.643%2032.348C67.65%20118.748%2040%20144.748%2040%20178.826c0%2028.795%2023.427%2052.22%2053.222%2052.22h50.512v40H93.222C41.37%20271.046%200%20229.68%200%20178.826%200%20137.42%2027.56%20101.7%2066.153%2090.365c10.854-36.998%2049.784-58.686%2086.933-48.78C175.326%2015.286%20207.86%200%20242.956%200c57.116%200%20105.366%2040.816%20115.782%2095.777%2031.603%2015.204%2052.062%2047.135%2052.062%2083.05zM286.318%20307.308h-33.84v-76.26h-79.486v76.26h-33.84l73.582%2073.708%2073.584-73.708z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
      background-size: 25px auto;
    }
  }

  &[data-command='cancel'] {
    &:before {
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M40%2020c0%2011.046-8.954%2020-20%2020S0%2031.046%200%2020%208.954%200%2020%200s20%208.954%2020%2020zm-3.883%200c0-8.908-7.21-16.116-16.117-16.116-8.908%200-16.117%207.21-16.117%2016.116%200%208.908%207.21%2016.116%2016.117%2016.116%208.908%200%2016.117-7.21%2016.117-16.116zM26.73%2030.34l-6.536-6.537-6.536%206.537-3.51-3.514%206.534-6.536-6.536-6.535%203.513-3.51%206.533%206.533%206.534-6.535%203.514%203.51-6.534%206.537%206.536%206.535-3.512%203.514z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
      background-size: 25px auto;
    }
  }

  &[data-command='reset'] {
    &:before {
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384.52637%20411.9975%22%20height%3D%22411.998%22%20width%3D%22384.526%22%3E%3Cpath%20d%3D%22M324.19%2060.334C243.868-19.99%20113.713-20.11%2033.237%2059.97L.107%2026.84%200%20149.676l122.838-.105-31.336-31.334c48.3-47.9%20126.28-47.783%20174.424.363%2048.27%2048.27%2048.27%20126.53%200%20174.796-24.135%2024.134-55.766%2036.2-87.398%2036.2v82.4c52.72%200%20105.44-20.11%20145.664-60.335%2080.446-80.447%2080.446-210.88%200-291.327z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
      background-size: auto 22px;
    }
  }

  &[data-command='delete'] {
    &:before {
      background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2048.88409%22%20height%3D%2248.884%22%20width%3D%2240%22%3E%3Cpath%20d%3D%22M40%203.325v4.75H0v-4.75h11.264c1.835%200%203.323-1.49%203.323-3.325h10.827c0%201.836%201.487%203.325%203.322%203.325H40zm-2.163%208.312v37.247H2.163V11.637h35.674zM13.04%2019.04c0-.985-.798-1.782-1.78-1.782-.984%200-1.78.797-1.78%201.78V41.6c0%20.985.796%201.783%201.78%201.783.982%200%201.78-.798%201.78-1.78V19.038zm8.74%200c0-.985-.797-1.782-1.78-1.782s-1.78.797-1.78%201.78V41.6c0%20.985.797%201.783%201.78%201.783s1.78-.798%201.78-1.78V19.038zm8.74%200c0-.985-.796-1.782-1.78-1.782-.982%200-1.78.797-1.78%201.78V41.6c0%20.985.798%201.783%201.78%201.783.984%200%201.78-.798%201.78-1.78V19.038z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
      background-size: auto 22px;
    }
  }

  &[data-command='block'] {
    background-color: red;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2252.493%22%20viewBox%3D%220%200%2039.99995%2052.493168%22%3E%3Cpath%20d%3D%22M21.25%2052.493H10.456C3.828%2052.493%200%2048.413%200%2041.44c0-5.985.01-25.505.01-25.505%200-4.203%203.597-6.087%206.516-4.8l.002-2.346c0-3.978%203.617-5.75%206.47-4.498.65-5.653%208.65-5.788%209.295-.02%202.85-1.202%206.42.575%206.42%204.536V27.17c.868-1.755%201.88-3.797%201.99-4.022%202.69-5.606%2011.427-2.022%208.815%204.234-.306.78-7.27%2016.033-7.842%2017.312-2.18%204.895-4.837%207.797-10.425%207.797zM3.208%2015.936V41.44c0%205.213%202.432%207.856%207.248%207.856H21.25c4.517%200%206.016-2.558%207.506-5.9.577-1.295%207.527-16.505%207.788-17.185l.02-.045c1.06-2.517-2.084-3.503-2.98-1.627l-.015.03c-.017.03-2.763%205.576-3.2%206.474-1.19%202.425-4.855%201.746-4.855-1.18V8.81c0-2.343-2.866-2.237-2.866%200v16.91c0%202.192-1.463%202.303-1.756%202.303-.293%200-1.757-.11-1.757-2.303l-.003-20.725c0-2.477-2.98-2.373-2.98%200v20.49c0%202.26-1.605%202.324-1.788%202.324-.297%200-1.78-.113-1.78-2.306V8.79c0-2.224-2.88-2.316-2.88%200v17.75c0%202.195-1.474%202.306-1.77%202.306-.295%200-1.767-.11-1.767-2.306V15.775c0-2.345-2.964-2.653-2.964.16z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
    background-size: auto 28px;
  }

  &[data-command='unblock'] {
    background-color: orange;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2236.488%22%20viewBox%3D%220%200%2040%2036.487541%22%3E%3Cpath%20d%3D%22M24.855%2026.388h-6.197v-16.29h6.197v16.29zm12.7-17.266C34.298%203.477%2028.275%200%2021.755%200c-4.9%200-9.522%201.967-12.9%205.343l2.508%202.507c2.72-2.72%206.444-4.306%2010.394-4.306%205.252%200%2010.104%202.802%2012.73%207.35%202.626%204.548%202.626%2010.15%200%2014.7-2.626%204.547-7.478%207.35-12.73%207.35-5.252%200-10.104-2.803-12.73-7.35-1.302-2.256-1.958-4.77-1.968-7.287h3.6l-5.32-7.41L0%2018.307h3.513c.01%203.127.825%206.254%202.444%209.06%203.26%205.642%209.28%209.12%2015.8%209.12%206.517%200%2012.54-3.478%2015.8-9.12%203.258-5.647%203.258-12.6%200-18.246z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E);
    background-size: auto 22px;
  }

  &:disabled {
    &:before {
      opacity: 0.7;
    }
  }
}

.collection.list {
  .container:empty:before,
  &:empty:before {
    content: 'No models found.';
  }

  .model {
    position: relative;
    background: #fff;

    $border-color: #dddfe3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid $border-color;
    border-bottom: none;
    &:last-child {
      border-bottom: 1px solid $border-color;
    }

    > header {
      flex: 1 1 100%;
      h1 {
        font-size: rem(16);
        margin: 0;
        padding: 0;
        margin-right: 80px - v.$global-padding;
        //white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        a {
          //white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      ul {
        @include utils.wipe-list;
        font-size: rem(12);
        color: #666;
        line-height: 1.2;
      }
    }

    > .content {
      display: none;
    }
  }
}

.pagination {
  $transition-time: 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: v.$global-padding;
  margin-bottom: v.$global-padding;
  .results {
    .number {
      font-size: 1.2em;
      font-weight: bold;
    }
  }

  ul {
    @include utils.wipe-list;
    @include utils.clear;
    > li {
      display: block;
      float: left;
      top: 0;
      height: 25px;
      width: 25px;
      &:not(:last-child) {
        margin-right: 1px;
      }
      > a {
        background: grey;
        transition: top $transition-time, background $transition-time, padding $transition-time, height $transition-time;
        display: block;
        color: white;
        text-align: center;
        position: relative;
        padding: 0;
        top: 0;
        height: 26px;
        line-height: 26px;
        text-decoration: none;
        &:not(.nav) {
          background: lighten(grey, 20%);
        }
      }
      &.current,
      &:hover {
        > a.nav {
          height: 32px;
          top: -3px;
          padding-top: 3px;
          //bottom: -3px;
          font-weight: bold;
        }
      }
      &.current {
        > a.nav {
          background: darken(grey, 20%);
        }
      }
      &:hover:not(.current) {
        > a.nav {
          background: darken(grey, 10%);
        }
      }
    }
  }
}

table {
  $border-color-blue: #c1dce8;
  $border-color: #dddfe3;
  width: 100%;
  &.collection {
    td,
    th {
      padding: 10px;
    }

    thead {
      border: 1px solid $border-color-blue;
      background: #e6f1f6;
    }

    tbody {
      > tr {
        border: 1px solid $border-color-blue;
        border-top: none;
        border-bottom-color: $border-color;
        &:last-child {
          border-bottom-color: $border-color-blue;
        }

        &:nth-child(2n) {
          background: #eee;
        }
      }
    }
    th {
      color: darken(base.$base-color, 10%);
      font-weight: bold;
      text-align: center;
    }
  }
}