// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;

.milestone {
  border: $b-1 solid var(--border-color, transparent);
  border-radius: $br-8;
  background: var(--color-background-primary);
  display: grid;
  grid-template:
    "avatar name button" auto "avatar content button" 1fr / calc(var(--sp-xxl) + var(--sp-l))
    1fr auto;
  padding: var(--sp-s) 0;
  align-items: center;
  column-gap: var(--sp-s);

  &.is-selected,
  &:hover {
    --border-color: var(--color-accent-primary);
  }
}

.name-input {
  grid-area: name;
}

.avatar {
  grid-area: avatar;
  justify-self: flex-end;
}

.name-wrapper {
  display: flex;
  align-items: baseline;
}

.name {
  grid-area: name;
  color: var(--color-foreground-primary);
}

.lock-icon {
  margin-left: 8px;
  transform: scale(0.8);
  color: var(--color-foreground-secondary);
  align-self: anchor-center;
}

.date {
  @include t.use-typography("body-small");

  grid-area: content;
  color: var(--color-foreground-secondary);
}

.snapshots {
  grid-area: content;
}

.milestone-buttons {
  grid-area: button;
  display: flex;
  padding-right: var(--sp-xs);
}

.menu-button {
  cursor: pointer;
}