// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

$styledInputs: 'input[type=text], input[type=password], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=date], input[type=time], input[type=datetime-local]';

@include exports('stack-view.clarity') {
  .stack-header {
    font-weight: $clr-stack-font-weight;
    display: flex;
    align-items: flex-end;

    .stack-title {
      display: block;
      flex: 1 1 auto;
      padding: 0.25rem 0;
    }

    .stack-actions {
      display: block;
      flex: 0 0 auto;

      .stack-action {
        margin: 0 0 0.25rem 0.5rem;

        &.btn {
          min-width: 0;
          padding: 0 0.5rem;
        }

        &.btn-link {
          // Weird negative margin to make the button aligned with the stack view
          // in its default state. It then looks unaligned on hover only.
          margin-right: -0.5rem;
        }
      }
    }
  }

  .stack-view {
    color: $clr-stack-view-color;
    font-size: $clr-stack-view-font-size;
    font-weight: $clr-stack-view-font-weight;
    line-height: $clr-stack-view-line-height;
    letter-spacing: $clr-stack-view-letter-spacing;

    margin-top: 0;
    border: $clr-stack-view-border-width solid $clr-stack-view-border-color;
    border-radius: $clr-stack-view-border-radius;
    overflow-y: auto;
    background-color: $clr-stack-view-bg-color;
    word-wrap: break-word;

    /* this fixes the overflow problem of children elements in a wrapper with a border-radius in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

    dd,
    dt {
      // One of the caveats of using definition lists here. Browsers automatically style them in unpredictable ways... :(
      -webkit-margin-start: 0;
      margin-inline-start: 0;
      margin-left: 0;
    }

    .stack-block {
      display: flex;
      // Wrapping for nested stack-blocks
      flex-flow: row wrap;
      border-bottom: 1px solid $clr-stack-view-stack-block-border-bottom;
      overflow-y: hidden;
    }

    // We have to handle potential nested elements, typically for web components
    > .stack-block:last-child,
    > :last-child .stack-block:last-of-type {
      // This way we keep a border-bottom on the last element if the stack view is higher
      // than the total height of the  blocks it contains, but we do not have a
      // weird 1px scroll when both heights match exactly.
      border-bottom: none;
      box-shadow: 0 1px 0 $clr-stack-view-border-box-color;
    }

    .stack-block-changed {
      > .stack-block-label {
        margin-left: -0.375rem;
      }
      &::before {
        content: ' ';
        position: relative;
        width: 0;
        height: 0;
        border-top: 0.375rem solid $clr-stack-block-changed-border-top-color;
        border-right: 0.375rem solid transparent;
      }
    }

    .stack-block-label {
      outline: none;
    }

    .stack-block-label,
    .stack-block-content {
      padding: 0.25rem 0.5rem;
      background-color: $clr-stack-view-stack-block-label-and-content-bg-color;
    }

    .stack-block-label {
      color: $clr-stack-view-stack-block-label-text-color;
      font-size: $clr-stack-view-stack-block-label-font-size;
      font-weight: $clr-stack-view-stack-block-label-font-weight;
      line-height: $clr-stack-view-stack-block-label-line-height;
      letter-spacing: $clr-stack-view-stack-block-label-letter-spacing;

      // We're doing a non-flexible item.
      // It's just easier to align and stretch everything vertically this way than with
      // floats or inline-blocks.
      flex: 0 0 40%;
      max-width: 40%;

      &::before {
        display: inline-block;
        content: '';
        float: left;
        height: 0.58333rem;
        width: 0.58333rem;
        margin: (0.25rem + $clr-rem-1px) 0.2rem 0 0;
        text-align: center;
      }
    }

    .stack-block-caret {
      height: 0.58333rem;
      width: 0.58333rem;
      margin-right: 0.2rem;
      fill: $clr-stack-view-stack-block-caret-color;
    }

    .stack-block-content {
      color: $clr-stack-view-stack-block-content-text-color;
      flex: 1 1 auto;
      width: 60%;
      margin-bottom: 0;
      font-weight: $clr-stack-font-weight;

      @include clr-container;
    }

    .stack-children {
      flex: 0 0 auto;
      width: 100%;

      .stack-block {
        border-bottom-color: $clr-stack-view-stack-children-stack-block-border-bottom-color;
      }
      > .stack-block:last-child,
      > :last-child .stack-block:last-of-type {
        // This way we keep a border-bottom on the last element if the stack view is higher
        // than the total height of the  blocks it contains, but we do not have a
        // weird 1px scroll when both heights match exactly.
        border-bottom: none;
        box-shadow: 0 1px 0 $clr-stack-view-border-box-color;
      }

      .stack-block-label,
      .stack-block-content {
        background-color: $clr-stack-view-stack-children-stack-block-label-and-content-bg-color;
      }

      .stack-block-label {
        padding-left: 1rem;
      }
    }

    .stack-block-expandable {
      > .stack-block-label {
        cursor: pointer;

        &::before {
          background-image: generateCaretIcon($clr-accordion-text-color);
          @include icon-background-styles();
          transform: rotate(-90deg);
          width: 0.5rem;
          height: 0.5rem;
        }
      }
      > .stack-block-label,
      > .stack-block-content {
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      }

      &.on-focus:not(.stack-block-expanded),
      &:hover:not(.stack-block-expanded) {
        > .stack-block-label,
        > .stack-block-content {
          background-color: $clr-stack-view-stack-block-expandable-hover;
        }
      }
    }

    .stack-block-expanded {
      > .stack-block-label::before {
        transform: rotate(0deg);
      }

      > .stack-block-label,
      > .stack-block-content {
        background-color: $clr-stack-view-stack-block-expanded-bg-color;
        color: $clr-stack-view-stack-block-expanded-text-color;
      }
    }

    /*
         * Styles specific to inputs used in a stack view
         */
    #{$styledInputs},
    .select {
      display: inline-block;
      vertical-align: top;
      margin-right: 0.5rem;
      // We need to account for the border at the bottom of inputs
      // Or the stack view blocks all move 1px when going in edit mode.
      // Inputs are 24px high but 25px total when you include the border.
      margin-bottom: -1 + $clr-default-borderwidth;
    }

    // Fix for Firefox and IE, which are throwing line-height for inputs in the air,
    // like they just don't care.
    // Yes, hard-coding the height isn't great. Haven't found anything better cross-browser.
    #{$styledInputs},
    .select select {
      height: 1rem;
    }

    // TODO: Clean up if not being used
    .stack-block-expandable > .stack-block-content {
      #{$styledInputs} {
        transition: background-size 0.2s ease, border-bottom-color 0.2s ease-in-out;
      }
      .select {
        select {
          transition: border-bottom-color 0.2s ease-in-out;
        }
        &::after {
          transition: color 0.2s ease-in-out;
        }
      }
    }
    // TODO: Clean up if not being used
    .stack-block-expanded > .stack-block-content {
      #{$styledInputs} {
        border-bottom-color: $clr-color-neutral-600;
        @include input-border-animation($clr-color-action-600);
      }

      .select {
        select {
          border-bottom-color: $clr-color-neutral-600;
        }

        &::after {
          color: $clr-color-neutral-600;
        }
      }
    }

    /*
         * Styles specific to stack views used in a modal
         */
    .modal & {
      height: 55vh;
      margin-bottom: 0;
    }
  }

  //Disable the generated icon without a breaking change for the stackview static markup
  //Only targets the Angular component as of now. Static will require a breaking change.
  .stack-view {
    clr-stack-block.stack-block-expandable {
      .stack-block-label::before {
        content: none;
      }
    }

    .stack-children clr-stack-block {
      .stack-block-label {
        padding-left: 1.5rem;
      }
    }
  }
}