// mixin to allow inherited themes able to customize color of svg
.default-analog-svg(@color) {
  background: inline-svg('../resources/images/clock/default.svg', 'svg', 'color: @{color}') no-repeat center
    center;
}

.small-analog-svg(@color) {
  background: inline-svg('../resources/images/clock/small.svg', 'svg', 'color: @{color}') no-repeat center
    center / cover;
}
//

:host {
  font-size: 2.5em;
  user-select: none;
  outline: none;

  [part~='segment'] {
    padding: 0.15em 0;
    line-height: 1em;
    align-self: flex-end;
  }

  [part~='hours'],
  [part~='minutes'],
  [part~='seconds'] {
    position: relative;

    &[part~='shifted'] {
      color: @scheme-color-primary;
    }
  }

  [part~='am-pm'] {
    font-size: 60%;
    line-height: 1.5em;
    padding-left: 3px;
  }

  [part='increment-button'],
  [part='decrement-button'] {
    left: 0;
    width: 100%;
    height: 50%;
    position: absolute;
    cursor: pointer;
    display: none;

    &::after {
      content: '';
      left: 0;
      right: 0;
      width: 0;
      height: 0;
      margin: 0 auto;
      position: absolute;
      border-style: solid;
      transform: rotate(360deg);
    }

    &[part='increment-button'] {
      top: 0;

      &::after {
        top: 0;
        border-width: 0 0.167em 0.178em 0.167em;
        border-color: transparent transparent @scheme-color-primary transparent;
      }
    }

    &[part='decrement-button'] {
      bottom: 0;

      &::after {
        bottom: 0;
        border-width: 0.178em 0.167em 0 0.167em;
        border-color: @scheme-color-primary transparent transparent transparent;
      }
    }
  }

  &:focus {
    [part~='hours'][active],
    [part~='minutes'][active],
    [part~='seconds'][active] {
      color: @scheme-color-primary;
    }
    [active] {
      display: block;
    }
  }

  // Analogue clock
  &[analogue] {
    border-radius: 100%;
    width: 160px;
    max-width: 200px;
    .default-analog-svg(@global-text-color);

    [part='digital'] {
      display: flex;
      position: absolute;
      top: 20%;
      left: 0;
      right: 0;
      justify-content: center;
      font-size: 0.34em;
      [part~='am-pm'] {
        font-size: 100%;
        line-height: 1;
      }
    }

    [part='hands']::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      width: 9%;
      height: 9%;
      top: 45.5%;
      left: 45.5%;
      border: 2px solid @scheme-color-complementary;
      box-sizing: border-box;
      z-index: 1;
    }

    [part~='hand']::after {
      content: '';
      position: absolute;
    }

    [part~='second'] {
      &::after {
        width: 1%;
        height: 43%;
        margin-top: 3%;
        margin-left: 49.5%;
        background-color: @scheme-color-primary;
      }
    }

    [part~='minute']::after {
      width: 3%;
      height: 43%;
      margin-top: 3%;
      margin-left: 48.5%;
      background-color: @scheme-color-complementary;
    }

    [part~='hour']::after {
      width: 3%;
      height: 28%;
      margin-top: 18%;
      margin-left: 48.5%;
      background-color: @scheme-color-complementary;
    }

    &[size='small'] {
      font-size: 10px;
      min-width: 50px;
      .small-analog-svg(@global-text-color);
      [part='hands']::after {
        background-color: @scheme-color-complementary;
      }

      [part~='second'] {
        &::after {
          width: 1.5%;
          height: 32%;
          margin-top: 16%;
        }
      }

      [part~='minute']::after {
        height: 37%;
        margin-top: 12%;
      }

      [part~='hour'] {
        &::after {
          height: 26%;
          margin-top: 23%;
        }
      }

      [part~='am-pm'] {
        padding-left: 0;
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 15%;
        font-size: 100%;
        justify-content: center;
      }
    }
  }
}